zrender自定义图形
来源:互联网 发布:我得网络 编辑:程序博客网 时间:2024/06/07 19:30
/*
* zr has been init like this, just use it!
*
* var zrender = require(‘zrender’);
* var zr = zrender.init(document.getElementById(‘main’));
*/
zr.clear();
function Cross() {
this.type = ‘cross’;
}
var id = zr.getId();
alert(id);
Cross.prototype = {
brush : function(ctx, e, isHighlight) {
var style = e.style || {};
if (isHighlight) {
// 根据style扩展默认高亮样式
style = e.highlightStyle || {};
for (var k in e.style) {
style[k] = e.style[k];
}
}
ctx.save();
ctx.beginPath();
ctx.strokeStyle = style.strokeColor || style.color;
ctx.moveTo(style.x - style.width / 2, style.y);
ctx.lineTo(style.x + style.width / 2, style.y);
ctx.moveTo(style.x, style.y - style.height / 2);
ctx.lineTo(style.x, style.y + style.height / 2);
ctx.closePath();
ctx.stroke();
ctx.restore();
return;
},
drift : function(e, dx, dy) { e.style.x += dx; e.style.y += dy;},isCover : function(e, x, y) { if (x >= (e.style.x - e.style.width / 2) && x <= (e.style.x + e.style.width / 2) && y >= e.style.y - e.style.height / 2 && y <= (e.style.y + e.style.height / 2) ) { return true; } return false;}
}
alert();
var shape = require(‘zrender/shape’);
shape.define(‘cross’, new Cross());
zr.addShape({
shape : ‘cross’,
style : {
x : 100,
y : 100,
width : 50,
height : 50,
color : ‘red’
},
draggable : true
});
function Audi() {
this.type = ‘auid’;
this.brushTypeOnly = ‘stroke’;
}
Audi.prototype = {
buildPath : function(ctx, style) {
var x = style.x;
var y = style.y;
var r = style.r;
for (var i = 0; i < 4; i++) {
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.moveTo(x + 5 * r / 2, y);
x += r * 3 / 2;
}
return;
},
/** * 返回矩形区域,用于局部刷新和文字定位 * @param {Object} style */getRect : function(style) { return { x : Math.round(style.x - style.r), y : Math.round(style.y - style.r), width : style.r * 6.5, height : style.r * 2 };}
}
var base = require(‘zrender/shape/base’);
base.derive(Audi);
shape.define(‘audi’, new Audi());
zr.addShape({
shape : ‘audi’,
style : {
x : 200,
y : 100,
r : 50,
color : ‘#1e90ff’,
text : ‘Audi’
},
draggable : true
});
zr.render();
- zrender自定义图形
- echarts内通过zrender添加文字,图形等
- 用zrender实现工作流图形化设计(附范例代码)
- 轻量级的Canvas类库zrender使用笔记 :简单自定义图件开发
- 自定义图形
- 使用ZRender画贝塞尔曲线
- 自定义图形xml格式
- qt 自定义图形项
- Android 自定义图形 shape
- 绘制自定义的图形
- android自定义drawable图形
- 自定义view--绘制图形
- Android 自定义进度图形
- Android 自定义图形实例
- Android 自定义图形实例
- Shape自定义图形详解
- 图形自定义方向拉伸
- 润乾集算器自定义图形
- 【第四周项目5】猴子选大王
- ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(下)
- 回顾一波对solr的安装过程:基于自带的jetty安装
- MySQL基础语法与概念(精)
- leetcode 292. Nim Game
- zrender自定义图形
- Nginx学习(1)
- Redis之String
- LeetCode:438. Find All Anagrams in a String
- maven环境变量
- Android 坐标转换方法
- Ubuntu Server 16.04下安装及配置MySQL
- phpstudy 中apache无法启动 启动一下就关闭的解决方法
- C#梳理【索引器Indexer】