在 HTML5 画布上实现多边形工具答案

【问题标题】：Implement polygon tool on HTML5 canvas在 HTML5 画布上实现多边形工具
【发布时间】：2014-03-06 21:12:37
【问题描述】：

我正在尝试在绘画中模仿多边形工具，以允许用户在我的画布上进行相同的绘制。以下是我迄今为止编写的代码，但有些与绘图工具不完全相同。另外我想知道绘制后是否有任何方法可以填充此形状。谁能帮忙。

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

}

【问题讨论】：

标签： javascript html5-canvas

【解决方案1】：

Canvas 基本上只是一个位图图像。您在画布上绘制的任何内容都存储为像素而不是形状。因此，一旦绘制，您将无法返回填充形状。您可以做的是将形状创建为具有属性的对象，例如填充颜色和重绘形状的步骤。然后，当您希望更改属性时，您可以在对象中执行此操作并重新绘制画布。

我已经构建了一个项目，其中包括绘制可以重新着色的多边形。

我的项目http://canvimation.github.com/ 可能有助于做你想做的事。

帮助文件位于https://sites.google.com/site/canvimationhelp/

我的项目的源代码在https://github.com/canvimation/canvimation.github.com

如果您愿意，请随时 fork 或复制代码。

【讨论】：