Question

所以我有一个很烦人的问题，我觉得很难理解和解决。我想在HTML5画布中的两个区域之间有一个部分 - 一个是矩形，另一个是用线条制作的复杂图形（下图）：

红色图形是复杂区域，下面浅蓝色是矩形，红色图形上有一部分。

我想要只显示同时具有读取区域和蓝色区域的区域（中心的粉红色）。

我能做的最好的事情就是这个但是非常不准确，因为这个数字在某种程度上是扭曲的。

这是我想要的结果：

我真的不知道什么似乎是问题。以下是FIRST和SECOND图片的代码：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var pts = [
  {
    "x": 144.54545454545456,
    "y": 357.3227658791164
  },
  {
    "x": 313.6363636363636,
    "y": 357.83576331700544
  },
  {
    "x": 482.72727272727275,
    "y": 390.79970884062334
  },
  {
    "x": 651.8181818181818,
    "y": 342.08032949810206
  },
  {
    "x": 820.909090909091,
    "y": 359.5816507117245
  },
  {
    "x": 990,
    "y": 394.7374924508338
  },
  {
    "x": 1159.090909090909,
    "y": 375.44796552459445
  },
  {
    "x": 1328.1818181818182,
    "y": 348.80309018743964
  },
  {
    "x": 1497.2727272727273,
    "y": 387.65889083719674
  },
  {
    "x": 1666.3636363636363,
    "y": 361.47353311915924
  },
  {
    "x": 1835.4545454545455,
    "y": 389.24337978312957
  },
  {
    "x": 1835.4545454545455,
    "y": -10000
  },
  {
    "x": 144.54545454545456,
    "y": -10000
  },
  {
    "x": 144.54545454545456,
    "y": 357.3227658791164
  }
],
bufferSpace = 2,
clipX = 144.5,
clipY = 245,
clipWidth = 1692,
clipHeight = 580;

ctx.beginPath();
ctx.moveTo(pts[0].x, pts[0].y + bufferSpace);
for (var i = 0; i < pts.length; i++) {
  var pt = pts[i];
  ctx.lineTo(pt.x, pt.y + bufferSpace);
}
ctx.fillStyle = "red";
ctx.globalAlpha = 0.8;
ctx.closePath();
ctx.fill();

ctx.fillStyle = "blue";
ctx.globalAlpha = 0.2;
////ctx.fillStyle = fillcolor;
ctx.fillRect(clipX, clipY, clipWidth, clipHeight);

//ctx.save();
//ctx.clip();

//ctx.globalAlpha = 0.8;
//ctx.fillStyle = fillcolor;
//ctx.fillRect(clipX, clipY, clipWidth, clipHeight);
//loadPatternImage(clipX, clipY, clipWidth, clipHeight);

//ctx.restore();

剪辑案例：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var pts = [
  {
    "x": 144.54545454545456,
    "y": 357.3227658791164
  },
  {
    "x": 313.6363636363636,
    "y": 357.83576331700544
  },
  {
    "x": 482.72727272727275,
    "y": 390.79970884062334
  },
  {
    "x": 651.8181818181818,
    "y": 342.08032949810206
  },
  {
    "x": 820.909090909091,
    "y": 359.5816507117245
  },
  {
    "x": 990,
    "y": 394.7374924508338
  },
  {
    "x": 1159.090909090909,
    "y": 375.44796552459445
  },
  {
    "x": 1328.1818181818182,
    "y": 348.80309018743964
  },
  {
    "x": 1497.2727272727273,
    "y": 387.65889083719674
  },
  {
    "x": 1666.3636363636363,
    "y": 361.47353311915924
  },
  {
    "x": 1835.4545454545455,
    "y": 389.24337978312957
  },
  {
    "x": 1835.4545454545455,
    "y": -10000
  },
  {
    "x": 144.54545454545456,
    "y": -10000
  },
  {
    "x": 144.54545454545456,
    "y": 357.3227658791164
  }
],
bufferSpace = 2,
clipX = 144.5,
clipY = 245,
clipWidth = 1692,
clipHeight = 580;

ctx.beginPath();
ctx.moveTo(pts[0].x, pts[0].y + bufferSpace);
for (var i = 0; i < pts.length; i++) {
  var pt = pts[i];
  ctx.lineTo(pt.x, pt.y + bufferSpace);
}

//ctx.closePath();
//ctx.fill();

//ctx.globalAlpha = 0.5;
////ctx.fillStyle = fillcolor;
//ctx.fillRect(clipX, clipY, clipWidth, clipHeight);

ctx.save();
ctx.clip();

ctx.globalAlpha = 0.8;
//ctx.fillStyle = fillcolor;
ctx.fillRect(clipX, clipY, clipWidth, clipHeight);
//loadPatternImage(clipX, clipY, clipWidth, clipHeight);

ctx.restore();

编辑：

这是我的实际案例。这是我的图形：

这是我想要的图片：

你可以看到里面有线条的红色和蓝色部分是不正确的！

Answer 1

在使用以下方法定义复杂形状后，只需替换主要部分：

class PlasmidMapView: NSView
{
    var dnaForMap = String()
}

class MainController: NSViewController 
{
    @IBOutlet var inputFromUser: NSTextView!
    @IBOutlet var plasmidMapIBOutlet: PlasmidMapView!      

     @IBAction func actionPopoverPlasmidMap(sender: AnyObject) 
    {
         plasmidMapIBOutlet.dnaForMap = inputDnaFromUser.string!  

         popoverPlasmidMap.showRelativeToRect(sender.bounds, 
         ofView: sender as! NSView, preferredEdge: NSRectEdge.MinY)         
    }
}

这将构建一个仅保持相交的形状（“destination-in”）的蒙版。同时立即设置目标颜色 - 使用已知值执行此操作或即时混合。

<强> Updated fiddle

更新以解决问题中的新信息 - 您可以在屏幕外的画布上执行此操作。完成后，简单地将屏幕外画布作为图像绘制在其他图形之上（画布可以直接用作图像源，即：//... complex shape defined... ctx.fillStyle = "rgb(205, 41, 89)"; // set target color here ctx.fill(); ctx.globalCompositeOperation = "destination-in"; ctx.fillRect(clipX, clipY, clipWidth, clipHeight);）。

两个区域之间的画布部分带有剪辑

1 个答案: