zrender自定义图形代码实现
/*
* 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();
