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

/*** 返回矩形区域，用于局部刷新和文字定位* @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自定义图形相关推荐

如何提取Tableau打包工作簿中的自定义图形和数据集
最近学习了一下Robert关于如何提取Tableau中自定义图形的文章,方法非常简单,只需使用大神提供的excel文件,就可以轻松完成. 文章地址:https://www.clearlyandsimp ...
C# 绘制PDF图形——基本图形、自定义图形、色彩透明度
引言在PDF中我们可以通过C#程序代码来添加非常丰富的元素来呈现我们想要表达的内容,如绘制表格.文字,添加图形.图像等等.在本篇文章中,我将介绍如何在PDF中绘制图形,并设置图形属性的操作. 文章中 ...
OSG使用OpenGL（以及glad库）绘制自定义图形
简单记录一下在OSG中使用OpenGL函数(以及glad库)绘制自定义图形. 源码: #include <osgViewer/viewer> #include <osg/Geode& ...
visio自己画的图怎么填充_VISIO自定义图形填充
有时候我们需要画一些特殊图形,比如以下这个当然,如果你不嫌麻烦的画,可以画好一个之后复制粘贴,但显然这不是好主意,这时候就需要掌握VISIO自定义图形填充技巧. 第一步:打开绘图资源管理器(基于20 ...
Python数据分析（三）matplotlib折线图应用实例——自定义图形风格
往期推荐: Python数据分析(一)matplotlib基础绘图和调整x轴刻度 Python数据分析(二)matplotlib折线图应用实例--绘制10点到12点的气温 Python数据分析(四)m ...
Qt使用C++封装qml自定义图形控件（QQuickPaintedItem）
C++封装qml自定义图形控件 QtWidget.qml简介通过继承QQuickPaintedItem封装控件描述公用接口定义代码示例效果图 QtWidget.qml简介 Qt提供了2套UI ...
python如何画贝塞尔曲线_Python使用matplotlib实现绘制自定义图形功能示例
本文实例讲述了Python使用matplotlib实现绘制自定义图形功能.分享给大家供大家参考,具体如下: 一代码 from matplotlib.path importPath from matp ...
ArcGIS JS 版军事标绘图(燕尾箭头、钳击箭头、集结地)扇形等自定义图形
ArcGIS API for JavaScript 版本的自定义图形标绘. 支持: arcgis js 3.x arcgis js 4.x 百度地图高德地图 openlayer 离线地图实例代码 ...
【幻灯片动画制作】Focusky教程 | 自定义图形形状
在Focusky(以下简称"FS软件")中,你可以利用软件自带的图形素材或者自己有的相关素材在画布中进行编辑组合.之后通过把这些素材添加到自己的素材库中,就可以变成自己的自定义图形 ...

zrender自定义图形

zrender自定义图形相关推荐

最新文章

热门文章