Javascript HTML5画布&；处理器友好-如何创建此填充/遮罩？

场景

在这个交互界面中，假设用户在画布上的四个位置单击。我希望我的填充符合点击的确切顺序。请考虑我下面的“示范”< /P>

绿线显示我要填充的区域（红色是最小边界框，可以安全地忽略）

我需要剪裁/遮罩该区域，否则我将使用笔划（简单）。我还没有找到一种处理器友好的方式将笔划转换为填充，或者我会使用它（这必须在移动设备上可用）

问题

如何以编程方式为这些单击点生成绿色边界路径（填充）？我有一个

数组中的所有坐标（
mouseevent
s）来循环

代码

下面是我试图完成的简化笔划（）

我整天都在做这个。以下是我的想法：

最重要的一点是：

在将点保存到阵列之前，必须知道光标的当前方向。这是至关重要的，如果你把事情搞砸了，你会得到一条自行倒塌的道路

下面是代码：

    var radians = null;
    var x2 = lastMouseEvent.clientX,
        x1 = currentMouseEvent.clientX,
        y2 = lastMouseEvent.clientY,
        y1 = currentMouseEvent.clientY

    radians = Math.atan2(y1 - y2, x1 - x2) * -1 // you can remove the -1 if everything is backwards for your app


收集阵列中的所有鼠标坐标，同时存储当前弧度（内/外）
循环遍历数组为路径的内部绘制一条线，在指针的方向上添加因子
反转阵列以在路径外部开始绘制
将内部轨迹的最后一点连接到外部轨迹的第一点
再次在数组中循环，在路径的外侧画一条线，将指针的方向作为因子
将外部轨迹的最后一点连接到内部轨迹的第一点

如果不确保所有点都连接，则无法获得完整的路径，这将不起作用

以下是如何根据轨迹考虑方向的因素：

var radians = [orientation radians stored in your array]
var diameter = [diameter you want your path to be]

var inside = {
    x: Math.sin(radians) * (diameter / 2),
    y: Math.cos(radians) * (diameter / 2)
}
var outside = {
    x: Math.sin(radians) * (diameter / -2),
    y: Math.cos(radians) * (diameter / -2)
}

你所要做的就是将尊重轨迹中的x/y值添加到当前循环的坐标中

是的，这是一个痛苦的屁股，但性能是伟大的所有设备。GL HF
您是在寻找一个掩码（如位图）还是一条路径（一组二维坐标和连接线）？理想情况下，我会有一个二维坐标数组，可以用来创建路径（可用于
ctx.fill（）
和
ctx.clip（）
）。这是一个复杂的代码位。对于每个线段，在端点处添加两个半圆（半径路径宽度/2），并与线段连接以沿直线形成一个丸状形状。然后为每个形状找到所有截距点和所有其他形状。然后，对于每个截距点，删除任何药丸形状内的所有内容。将所有点焊接到比像素更近的位置。结果是二维点和连接线段和圆弧。找到最上面的部分，顺时针走到后面开始。如果有任何点仍然存在，则逆时针重复，直到没有更多点为止。这将创建您需要的路径。
var radians = [orientation radians stored in your array]
var diameter = [diameter you want your path to be]

var inside = {
    x: Math.sin(radians) * (diameter / 2),
    y: Math.cos(radians) * (diameter / 2)
}
var outside = {
    x: Math.sin(radians) * (diameter / -2),
    y: Math.cos(radians) * (diameter / -2)
}