0
我试图模拟涂料中的多边形工具，以允许用户在我的画布上绘制相同的工具。 下面是我已编码到目前为止，但一些如何它不完全相同的绘画工具。 另外我想知道是否有任何方法来填补这个形状一旦绘制。 任何人都可以请帮忙。在HTML5画布上实现多边形工具
var startPointX = "", startPointY = "", endpointX, endpointY, isnewShape = false;
function tool_polygon() {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
tool.started = true;
tool.x0 = ev.offsetX;
tool.y0 = ev.offsetY;
console.log('mousedown');
if (startPointX == "" && startPointY == "") {
startPointX = tool.x0;
startPointY = tool.y0;
}
console.log('startPointX ' + startPointX + ' startPointY ' + startPointY + ' ev.offsetX ' + ev.offsetX + ' ev.offsetY ' + ev.offsetY + ' isnewShape ' + isnewShape);
//if ((Math.abs(startPointX - ev.offsetX) < 5) && (Math.abs(startPointY - ev.offsetY) < 5) && (startPointX != ev.offsetX && startPointY != ev.offsetY) && !isnewShape) {
//keeping average gap of 5 pixels as the canvas is smaller and can't get exact start point
if ((Math.abs(startPointX - ev.offsetX) < 5) && (Math.abs(startPointY - ev.offsetY) < 5) && isnewShape) {
alert('point matched');
isnewShape = false ;
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(endpointX, endpointY);
//context.moveTo(ev.offsetX, ev.offsetY);
context.lineTo(startPointX, startPointY);
startPointX = "";
startPointY = "";
endpointX = "";
endpointY = "";
context.strokeStyle = strokeColor;
context.stroke();
context.closePath();
img_update();
tool.started = false;
}
else {
if (startPointX == "" || startPointY == "" || endpointX == "" || endpointY == "")
return;
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(endpointX, endpointY);
isnewShape = false;
context.lineTo(ev.offsetX, ev.offsetY);
endpointX = ev.offsetX;
endpointY = ev.offsetY;
context.strokeStyle = strokeColor;
context.stroke();
context.closePath();
img_update();
}
};
this.mousemove = function (ev) {
if (!tool.started) {
return;
}
console.log('mousemove');
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(startPointX, startPointY);
context.lineTo(ev.offsetX, ev.offsetY);
endpointX = ev.offsetX;
endpointY = ev.offsetY;
context.strokeStyle = strokeColor;
context.stroke();
context.closePath();
};
this.mouseup = function (ev) {
if (tool.started) {
console.log('mouseup');
isnewShape = true;
tool.started = false;
img_update();
}
};
}