github 地址: https://github.com/wangyuheng/painter
DEMO 地址: http://painter.crick.wang/
针对上个版本的基础代码进行抽象和封装
将所有的图形绘制工具,都“继承”一个 DrawTool 工具类,在此工具类中绑定、解绑事件,代码如下
(function() {
var defaultListener = {
mousedown: function() {
console.log('mousedown you should implement this function!');
},
mousemove: function() {
console.log('mousemove you should implement this function!');
},
mouseup: function() {
console.log('mouseup you should implement this function!');
}
};
var DrawTool = {
init: function(svgDoc, listeners) {
var l = $.extend({}, defaultListener, listeners);
svgDoc.on('mousedown', l.mousedown);
svgDoc.on('mousemove', l.mousemove);
svgDoc.on('mouseup', l.mouseup);
},
stop: function(svgDoc, listeners) {
var l = $.extend({}, defaultListener, listeners);
svgDoc.off('mousemove', l.mousemove);
svgDoc.off('mousedown', l.mousedown);
svgDoc.off('mouseup', l.mouseup);
}
};
this.DrawTool = DrawTool;
})();
所有 js 独立代码都采用闭包形式,避免的参数污染。 拆分后的目录结构如下
还是以矩形为例,Rect 在构造函数中继承使用了 DrawTool 的 init 方法,并重写 stop 方法,暴露出去。
var Rect = function(parentEle) {
parent = parentEle;
svgDoc = parent.doc();
DrawTool.init(svgDoc, listener);
this.stop = function () {
DrawTool.stop(svgDoc, listener);
};
};
this.DrawTool.Rect = Rect;
通过在 Rect 类内部定义 mousedown、mousemove、mouseup 事件方法,调用 svgjs 提供的绘制方法,实现图形的绘制工作。完整代码如下:
(function() {
var parent = null;
var drawing = false;
var element = null;
var startPoint = null;
function mousedown(event) {
console.log('rect mousedown');
drawing = true;
startPoint = svgDoc.transformPoint(event);
element = parent.rect(0, 0).style("fill-opacity", '0.0').stroke({
width: '2',
color: '#000000'
});
}
function mousemove(event) {
console.log('rect mousemove');
if (drawing) {
var svgPoint = svgDoc.transformPoint(event);
var x = svgPoint.x;
var y = svgPoint.y;
var newWidth = x - startPoint.x;
var newHeight = y - startPoint.y;
var startX = startPoint.x;
var startY = startPoint.y;
if (newWidth < 0) {
startX += newWidth;
}
if (newHeight < 0) {
startY += newHeight;
}
newWidth = Math.abs(newWidth);
newHeight = Math.abs(newHeight);
element.x(startX).y(startY).width(newWidth).height(newHeight);
}
};
function mouseup(event) {
console.log('rect mouseup ' + element);
drawing = false;
}
var listener = {
mousedown: mousedown,
mousemove: mousemove,
mouseup: mouseup,
};
var Rect = function(parentEle) {
parent = parentEle;
svgDoc = parent.doc();
DrawTool.init(svgDoc, listener);
this.stop = function () {
DrawTool.stop(svgDoc, listener);
};
};
this.DrawTool.Rect = Rect;
})();
有一个特殊的类为折线 polyline 工具类,此图形为连续绘制,需要记录上一个 element,并且在 stop 方法中清空之前的 element,并且监听鼠标右键点击事件,结束图形绘制。
阻止鼠标右键方法为
function mousedown(event) {
if (event.button == 2) {
document.oncontextmenu=function(){return false;}
drawing=false;
points = [];
element = null;
return;
}
if (!drawing) {
drawing = true;
var currPoint = svgDoc.transformPoint(event);
points.push([currPoint.x, currPoint.y]);
}
}
至此,已完成图形的基本绘制功能
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于