试图用html5画布绘制一个分成几部分的图案

Question

我需要用 html5 画布画这个形状，我可以把它画成一个画布。

我需要将每个部分都作为一个唯一的对象来处理 - 聆听鼠标悬停在每个部分上，确定用户将鼠标悬停在哪个部分上，并让用户选择填充相关部分形状。

var canvas = document.getElementById('shape');
var context = canvas.getContext('2d'),
width = $('#shape').width(),
part_width = width / parts_num;

context.beginPath();

var start_x = 17,
end_x = 17 + part_width;
for (var i = 0; i < parts_num; i++) {
context.moveTo(start_x, 0); 
context.lineTo(end_x,0);
context.moveTo(start_x, 0);
context.bezierCurveTo(50+start_x, 30, 40+start_x, 45, 13+start_x, 89);
context.moveTo(13+start_x, 89);
context.bezierCurveTo(0+start_x, 110, 0+start_x, 126, 27+start_x, 174);
context.moveTo(28+start_x, 174);
context.lineTo(85+start_x,174);
start_x += part_width;//80 is x starting point
};
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();

Answer 1

我建议使用CreateJS。使用画布时，它会让您的生活变得更轻松。

这里是Demo，介绍如何使用 CreateJS 将每个形状作为对象处理。

单击单个形状以查看每个形状如何触发它自己的处理程序。

function curveShape(index, start_x, end_x) {
    var shape = new createjs.Shape();
    var context = shape.graphics.beginStroke("red").beginFill("#ffffee");    
    context.moveTo(start_x, 0);
    context.bezierCurveTo(start_x + 10, 30, start_x + 10, 45, start_x - 15, 90);
    context.bezierCurveTo(start_x - 30, 120, start_x - 30, 135, start_x, 180);
    context.lineTo(end_x, 180);
    context.bezierCurveTo(end_x - 30, 135, end_x - 30, 120, end_x - 15, 90);
    context.bezierCurveTo(end_x + 10, 45, end_x + 10, 30, end_x, 0);
    context.lineTo(start_x, 0);

    shape.name = "shape " + index;
    shape.x = shape.y = 30;
    shape.addEventListener("mousedown", function () {
        alert("I am " + shape.name);
    });

    return shape;
}

var stage = new createjs.Stage("shape");    

for(var i = 0; i < 4; i++) 
    stage.addChild(new curveShape(i+1, i * 80, (i + 1) * 80));   

stage.update();

Answer 2

使用 vanilla JavaScript 和 canvas 的解决方案

您可以将复杂形状嵌入到处理位置和检查的对象中。对象可能如下所示：

Full working demo here

摘录：

主要对象 -

function wave(ctx, offset, width) {

    /// the check function which checks point x, y in last path
    this.isInPath = function(x, y) {
        getPath();
        return ctx.isPointInPath(x, y);
    }

    /// this render the object with the set fill color
    this.draw = function(color) {
        getPath();
        ctx.fillStyle = color;
        ctx.fill();
        ctx.lineWidth = 5;
        ctx.strokeStyle = "red";
        ctx.stroke();
    }

    /// common function to generate just the path.
    function getPath() {
        ctx.beginPath();
        ctx.moveTo(offset, 0);
        ctx.bezierCurveTo(50 + offset, 30, 40 + offset, 45, 13 + offset, 89);
        ctx.bezierCurveTo(offset, 110, offset, 126, 27 + offset, 174);
        ctx.lineTo(27 + offset + width, 174);
        ctx.bezierCurveTo(offset + width, 100, offset + width + 0, 126, 27 + offset + width, 65);
        ctx.bezierCurveTo(43 + offset + width, 40, 40 + offset + width, 25, offset + width, 0);
        ctx.closePath();
    }

    this.draw('white');
    return this;
}

确保路径是独立的，这意味着它是一个完整的形状，不依赖于相邻部分（即不使用相邻线）。这基本上就是您处理复杂形状所需要做的所有事情。

渲染

要渲染，只需这样做：

for(;i < parts_num; i++) {
    parts.push( new wave(context, i * part_width, part_width) );
}

检查

至于检查点是否在零件中，您可以这样做：

/// check mouse move in this example
canvas.addEventListener('mousemove', hover, false);

/// the function to check parts
function hover(e) {

    ///get mouse coord relative to canvas
    var r = canvas.getBoundingClientRect();
    var x = e.clientX - r.left;
    var y = e.clientY - r.top;

    ///optimize so we only clear last selected part
    if (lastPart > -1) {
        parts[lastPart].draw('white');
        lastPart = -1;
    }    

    for(i = 0 ;i < parts_num; i++) {
        if (parts[i].isInPath(x, y) === true) {
            parts[i].draw('green');    
            lastPart = i;
            break; //don't need to check more
        }
    }
}

这里有优化的空间（重用对象内部的最后一条路径，将形状缓存为图像，分段检查范围等等），但表明使用 vanilla canvas 和 JavaScript 处理这个问题并没有那么复杂。

以此为基础，您应该能够自己处理点击等。

（注意：我对贝塞尔曲线的结尾不太准确 - 如果您应该选择使用此解决方案，我会留给您进行微调..）。