http://www.just.org.cn/zrender/index.html

https://github.com/ecomfe/zrender

目录结构:

|-project
    |-demo
        |-js
            |-main.js
        |-index.html
    |-libs
        |-requirejs
            |-require.js
        |-zrender
            |-src
                |-zrender.js
                ...

src下面省略了很多, 其实就是将"https://github.com/ecomfe/zrender"中src下面所有文件夹和文件.

自己写的就是 main.js 和 index.html

main.js

require.config({

	packages: [

		{

			name: 'zrender',

			location: '../../libs/zrender/src',

			main: 'zrender'

		}

	]

});

require(

	[

		'zrender',

		'zrender/animation/animation',

		'zrender/shape/Circle'

	],

	function(zrender, Animation, CircleShape){

		//

		var zr = zrender.init( document.getElementById('Main') );

		var circle = new CircleShape({

			position: [100, 100],

			scale: [1, 1],

			style: {

				x: 0,

				y: 0,

				r: 50,

				brushType: 'fill',

				color: 'rgba(33, 222, 10, 0.8)',

				lineWidth: 5,

				text: 'circle',

				textPosition: 'inside'

			},

			draggable: true

		});

		zr.addShape(circle);

		zr.render();

	}

);

index.html

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>zRender demo</title>

	<script type="text/javascript" src="../libs/requirejs/require.js" data-main="./js/main.js"></script>

</head>

<body>

	 <div id="Main" style="width:600px;height:400px;"></div>

</body>

</html>

效果如下:

使用百度zrender, demo抛砖引玉.的更多相关文章

  1. Android studio百度地图demo出现230错误，key校验失败

    转自daoxiaomianzi原文 Android studio 百度地图demo出现230错误,key校验失败 使用AndroidStudio导入Baidu地图的as版的demo,引入后,发现没有k ...

  2. 将百度地图Demo抽取出来安到自己的程序中

    今日所学: 使用百度地图ADK实现手机定位 [Android]使用百度.高德.腾讯地图SDK获取定位数据与屏幕截图分享到QQ_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 代码获取SHA1 (2 ...

  3. 【Android接百度地图API】百度地图Demo点击按钮闪退

    运行百度地图自带的BaiduMap_AndroidSDK_v4.1.0_Sample里面的BaiduMapsApiASDemo发现点击上面的按钮会闪退,控制台报的是xml的问题 查了一下,官方文档特别 ...

  4. Jquery Mobile 百度地图 Demo

    首先非常感谢franck分享的Demo! Demo截图: 下面是franck对此Demo的说明: 原理:1.通过百度拾取坐标系统获得点位的坐标. http://api.map.baidu.com/lb ...

  5. 百度地图 - demo

    项目需要集成百度地图,那么关于如何集成百度地图的事,就自己去百度开放平台查看文档吧,这是非常简单的事,在这里就不多说了. 那么下面我就说说我在这个demo里所做的事. 首先,项目需要具备定位及计算两地 ...

  6. android 百度地图demo 随感

    最近项目组的老大要我对百度的android的sdk进行一段的预研,由于技术太菜,出了不少的错误,因此有一点感悟了. 嗨,这个错误浪费了我一天的时间的时候,我按照百度的技术文档一步步的来做,每部基本上都 ...

  7. 一个抽取百度定位的教程（下载百度地图Demo+配置+抽取）

    效果展示 已经下载Demo的可以直接到第五步,已经配置好的并可以运行的可以直接到第七步. 1.在浏览器搜索 " 百度定位API ",点击下面这个链接 2.翻到最下面找到并点击 &q ...

  8. 百度地图demo

    以下代码拷贝成html,直接运行即能看到百度地图 <!DOCTYPE html><html> <head> <meta http-equiv="Co ...

  9. 简单高效快捷的百度地图demo

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

随机推荐

  1. 【智能家居篇】wifi在智能家居中的应用

    转载请注明出处:http://blog.csdn.net/Righthek 谢谢! 在设计智能家居系统方案时,一个很关键的point就是组网方式.组网方式关系到整个智能家居系统的稳定性.可扩展性.实时 ...

  2. mahout算法源码分析之Itembased Collaborative Filtering（三）RowSimilarityJob验证

    Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 本篇分析上篇的分析是否正确,主要是编写上篇输出文件的读取以及添加log信息打印相关变量. 首先,编写下面 ...

  3. Python学习 之 内建函数

    1.常用函数:abs().max().min().len().divmod().pow().round() 例1:abs返回数字绝对值 abs(10) #结果10 abs(-10) #结果10 例2: ...

  4. truncate 与 delete 的区别

    Delete删除的数据可以通过日志文件进行恢复 Truncate Table删除的数据不能进行恢复 Delete删除时,标识列取值保留原使用中最大值 Truncate Table删除时,标识列恢复到最 ...

  5. dsp与sem的互补以及技术实现

    SEM翻译过来叫搜索引擎营销,个人认为是随着搜索引擎竞价排名出现的一个行业,已经有了好多年的历史,做sem的公司这些年里手里应该都积攒着大量的cookie,关键词等与SEM和追踪相关的数据,这些数据现 ...

  6. 内核工具 – Sparse 简介

    转载:http://www.cnblogs.com/wang_yb/p/3575039.html Sparse是内核代码静态分析工具, 能够帮助我们找出代码中的隐患. 主要内容: Sparse 介绍 ...

  7. 嵌入式设备上的 Linux 系统开发

    转载:http://www.ibm.com/developerworks/cn/linux/embed/embdev/index.html   如果您刚接触嵌入式开发,那么大量可用的引导装载程序(bo ...

  8. 小白日记13：kali渗透测试之服务扫描（三）-SMTB扫描、防火墙识别、负载均衡识别、WAF识别

    SMTP扫描 SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式.SMTP协议属于TCP/ ...

  9. qsort,mergesort,插入排序

    //插入排序 int a[n]; ;i<=n;i++) { int s=a[i]; ; while(j&&a[j]>a[i]) { a[j+]=a[j]; j--; } a ...

  10. Android（java）学习笔记78：设计模式之单例模式

    单例模式代码示例: 1. 单例模式之饿汉式: package cn.itcast_03; public class Student { // 构造私有 private Student() { } // ...