Question

我需要用html5 canvas绘制这个形状，我能够将它画成一个画布。

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

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 JavasScript和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处理它并不是那么复杂。

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

（注意：我对bezier的收尾结束的准确性不太准确 - 如果您选择使用此解决方案，我会留给您微调它。）。

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

2 个答案:

使用vanilla JavasScript和canvas