Question

我试图在绘画中模仿多边形工具，以允许用户在我的画布上绘制它。下面是我到目前为止编码的内容，但有些内容与绘图工具不完全相同。另外我想知道有没有办法填充这个形状一旦绘制。任何人都可以帮忙。

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

}

Answer 1

Canvas基本上只是一个位图图像。无论您在画布上绘制什么，都会将其存储为像素而不是形状。所以一旦画出你就不能回去填充形状了。您可以做的是将形状创建为具有属性的对象，例如填充颜色和重绘形状的步骤。然后，当您希望更改属性时，可以在对象中执行此操作并重新绘制画布。

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

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

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

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

如果您愿意，请随意分叉或复制代码。

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

1 个答案: