使用百度zrender, demo抛砖引玉.
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抛砖引玉.的更多相关文章
- Android studio百度地图demo出现230错误,key校验失败
转自daoxiaomianzi原文 Android studio 百度地图demo出现230错误,key校验失败 使用AndroidStudio导入Baidu地图的as版的demo,引入后,发现没有k ...
- 将百度地图Demo抽取出来安到自己的程序中
今日所学: 使用百度地图ADK实现手机定位 [Android]使用百度.高德.腾讯地图SDK获取定位数据与屏幕截图分享到QQ_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 代码获取SHA1 (2 ...
- 【Android接百度地图API】百度地图Demo点击按钮闪退
运行百度地图自带的BaiduMap_AndroidSDK_v4.1.0_Sample里面的BaiduMapsApiASDemo发现点击上面的按钮会闪退,控制台报的是xml的问题 查了一下,官方文档特别 ...
- Jquery Mobile 百度地图 Demo
首先非常感谢franck分享的Demo! Demo截图: 下面是franck对此Demo的说明: 原理:1.通过百度拾取坐标系统获得点位的坐标. http://api.map.baidu.com/lb ...
- 百度地图 - demo
项目需要集成百度地图,那么关于如何集成百度地图的事,就自己去百度开放平台查看文档吧,这是非常简单的事,在这里就不多说了. 那么下面我就说说我在这个demo里所做的事. 首先,项目需要具备定位及计算两地 ...
- android 百度地图demo 随感
最近项目组的老大要我对百度的android的sdk进行一段的预研,由于技术太菜,出了不少的错误,因此有一点感悟了. 嗨,这个错误浪费了我一天的时间的时候,我按照百度的技术文档一步步的来做,每部基本上都 ...
- 一个抽取百度定位的教程(下载百度地图Demo+配置+抽取)
效果展示 已经下载Demo的可以直接到第五步,已经配置好的并可以运行的可以直接到第七步. 1.在浏览器搜索 " 百度定位API ",点击下面这个链接 2.翻到最下面找到并点击 &q ...
- 百度地图demo
以下代码拷贝成html,直接运行即能看到百度地图 <!DOCTYPE html><html> <head> <meta http-equiv="Co ...
- 简单高效快捷的百度地图demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
随机推荐
- TC srm 673 300 div1
TC srm.673 300 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 Description 给你n(n<=50)匹马和n个人,一匹马和一个人能 ...
- QT5 串口收发实例代码
以下代码是自己测试门禁系统使用的 主要用到了串口的接收和发送 开发环境:xp QT5.1.1 串口:38400 N 8 1 自动检测可用串口 在xp上测试没问题 有些usb转串口会出现波特 ...
- Android - FrameLayout覆盖顺序
FrameLayout覆盖顺序 本文地址: http://blog.csdn.net/caroline_wendy FrameLayout: Child views are drawn in a st ...
- 框架使用的技术主要是SpringMVC 在此基础上进行扩展
框架使用的技术主要是SpringMVC 在此基础上进行扩展 1 Web前端使用 2 前段控制器采用SpringMVC零配置 3 IOC容器Spring 4 ORM使用 Mybites或者hiberna ...
- Mysql分表教程
一般来说,当我们的数据库的数据超过了100w记录的时候就应该考虑分表或者分区了,这次我来详细说说分表的一些方法.目前我所知道的方法都是MYISAM的,INNODB如何做分表并且保留事务和外键,我还不是 ...
- 小米2及其他Android手机无法连接mac解决方案
一般的android连接mac 很方便不用安装驱动就可以啦,可是不知道为什么二般情况下有的android手机(小米2,华为等)就是连接不上,下来就说说二般情况下如何连接. 1.关于本机-->更多 ...
- 高级I/O之记录锁
若两个人同时编辑一个文件,其后果将如何呢?在很多UNIX系统中,该文件的最后状态取决于写该文件的最后一个进程.但是对于有些应用程序(例如数据库),进程有时需要确保它正在单独写一个文件.为了向进程提供这 ...
- 信号之sleep函数
#include <unistd.h> unsigned int sleep(unsigned int seconds); 返回值:0或未休眠够的秒数 此函数使调用进程被挂起,直到满足以下 ...
- Linux shell 脚本攻略之比较与测试
摘自:<Linux shell 脚本攻略>Page30-33
- cocos2d-x调度器原理
程序运行后每达到一帧的时间间隔就会执行一次mainLoop void CCDisplayLinkDirector::mainLoop(void) { //判断是否需要释放CCDirector,通常游戏 ...