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