zrender自定义图形

最新推荐文章于 2019-12-13 16:49:27 发布

原创最新推荐文章于 2019-12-13 16:49:27 发布 · 5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#图形

本文档展示了如何使用ZRender库初始化画布并定义自定义图形，包括十字标记（Cross）和奥迪汽车形状（Audi）。通过brush方法和buildPath方法绘制图形，并设置其属性如颜色、位置和大小，同时使图形具有拖动功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
* 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
});

/**
 * 返回矩形区域，用于局部刷新和文字定位
 * @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();