Canvas 多边形未正确接触

Question

所以我一直在摆弄canvas这个元素，我好像运行陷入了一个非常恼人的境地，但我一直没能找到解决办法。假设两个多边形绘制在 canvas 上，并且它们应该相互接触。一个多边形是这样绘制的：

ctx.beginPath();
ctx.moveTo(oX,oY);
ctx.lineTo(oX=oX+k,oY=oY-h);
ctx.lineTo(oX=oX+k,oY=oY+h);
ctx.lineTo(oX=oX-k,oY=oY+h);
ctx.lineTo(oX=oX-k,oY=oY-h);
ctx.fill();

在此fiddle中实现了一个简单的版本。

正如您可能看到的那样，这些形状之间有一条细线。我怎样才能避免它？我已经尝试了解决方案 here，但他们似乎并没有真正提到这种情况，因为我正在处理对角线。

Answer 1

是的，当填充的多边形导致那个微小的间隙时，这很烦人。在理论上应该相交的对角线上尤其常见。

一个常见的解决方法是在多边形周围放置半像素、相同颜色的描边：

//Some basic setup ...
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oX = 50;
var oY = 50;
var h = 33;
var k = 50;
ctx.fillStyle = 'red';
ctx.strokeStyle='red';
ctx.lineWidth=0.50;

//Draw one polygon
ctx.beginPath();
ctx.moveTo(oX,oY);
ctx.lineTo(oX=oX+k,oY=oY-h);
ctx.lineTo(oX=oX+k,oY=oY+h);
ctx.lineTo(oX=oX-k,oY=oY+h);
ctx.lineTo(oX=oX-k,oY=oY-h);
ctx.fill();
ctx.stroke();
//Draw another polygon
oX = oX+k;
oY = oY+h;
ctx.beginPath();
ctx.moveTo(oX,oY);
ctx.lineTo(oX=oX+k,oY=oY-h);
ctx.lineTo(oX=oX+k,oY=oY+h);
ctx.lineTo(oX=oX-k,oY=oY+h);
ctx.lineTo(oX=oX-k,oY=oY-h);
ctx.fill();
ctx.stroke();

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");



//Some basic setup ...
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var oX = 50;
var oY = 50;
var h = 33;
var k = 50;
ctx.fillStyle = 'red';
ctx.strokeStyle='red';
ctx.lineWidth=0.50;

//Draw one polygon
ctx.beginPath();
ctx.moveTo(oX,oY);
ctx.lineTo(oX=oX+k,oY=oY-h);
ctx.lineTo(oX=oX+k,oY=oY+h);
ctx.lineTo(oX=oX-k,oY=oY+h);
ctx.lineTo(oX=oX-k,oY=oY-h);
ctx.fill();
ctx.stroke();
//Draw another polygon
oX = oX+k;
oY = oY+h;
ctx.beginPath();
ctx.moveTo(oX,oY);
ctx.lineTo(oX=oX+k,oY=oY-h);
ctx.lineTo(oX=oX+k,oY=oY+h);
ctx.lineTo(oX=oX-k,oY=oY+h);
ctx.lineTo(oX=oX-k,oY=oY-h);
ctx.fill();
ctx.stroke();

#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

Answer 2

一个解决方案

您始终可以使用划线技巧，但取决于您的目标：

如果要显示许多彼此相邻的多边形，您可以将多边形视为简单的正方形。

将它们画在屏幕外 canvas 中并排放置。这将产生一个没有间隙的结果。
然后将主要 canvas 变换到您希望这些多边形出现的位置。根据目标添加旋转 and/or 倾斜。
最后，将离屏 canvas 作为图像绘制到主 canvas 上。问题消失了。

这将为您提供准确的结果，无需额外的描边步骤，并且框的计算变得非常简单和快速（想想 2d 网格）。

不过您必须使用屏幕外 canvas。如果您转换 main canvas 并绘制形状，您将遇到与已经存在的问题相同的问题。这是因为每个点都经过变换，如果需要插值，则会针对每个路径形状单独计算。在图像中绘制将在整个表面上添加插值，并且仅在存在间隙（非不透明 alpha）的地方添加。由于我们已经“无缝”，这不再是问题。

这将需要额外的步骤来计划正确放置它们，但这是一个简单的步骤。

例子

第 1 步 - 将框绘制到屏幕外 canvas:

此代码在屏幕外绘制 canvas 导致两个框没有间隙：

（示例使用屏幕显示结果，屏幕外的用法见下一步canvas）

var ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = "red";

ctx.fillRect(10, 10, 50, 50);
ctx.fillRect(60, 10, 50, 50);

<canvas/>

第 2 步 - 变换主要 canvas 并在屏幕外绘制 canvas

当绘制到 main canvas 并设置转换时，结果将是（伪随机转换只是为了显示）：

var ctx = document.querySelector("canvas").getContext("2d");

// off-screen canvas
var octx = document.createElement("canvas").getContext("2d");
octx.fillStyle = "red";
octx.fillRect(10, 10, 50, 50);
octx.fillRect(60, 10, 50, 50);

// transform and draw to main
ctx.translate(80, 0);
ctx.rotate(0.5, Math.PI);
ctx.transform(1, 0, Math.tan(-0.5),1, 0,0); // skew
ctx.drawImage(octx.canvas, 0, 0);

<canvas />

第 3 步（可选）- 互动

如果您想与框进行交互，只需应用相同的变换，然后为框添加路径并针对鼠标位置对其进行命中测试。重绘单个状态，通过clear和back out screen擦除canvas on top:

var ctx = document.querySelector("canvas").getContext("2d");

// off-screen canvas
var octx = document.createElement("canvas").getContext("2d");
octx.fillStyle = "red";
octx.fillRect(10, 10, 50, 50);
octx.fillRect(60, 10, 50, 50);

// allow us to reuse some of the steps:
function getTransforms() {
  ctx.setTransform(1,0,0,1,0,0);
  ctx.translate(80, 0);
  ctx.rotate(0.5, Math.PI);
  ctx.transform(1, 0, Math.tan(-0.5),1, 0,0); // skew
}

function clear() {
  ctx.setTransform(1,0,0,1,0,0);
  ctx.clearRect(0,0,300,150);
}

function redraw() {
  ctx.drawImage(octx.canvas, 0, 0);
}

getTransforms();
redraw();

ctx.canvas.onmousemove = function(e) {
  var r = this.getBoundingClientRect(),
      x = e.clientX - r.left, y = e.clientY - r.top;
  
  // box 1 (for many, use array)
  ctx.beginPath();
  ctx.rect(10, 10, 50, 50);

  clear();         // these can be optimized to use state-flags
  getTransforms(); //  so they aren't redraw for every move...
  redraw();

  // just one box check here
  if (ctx.isPointInPath(x, y)) {
      ctx.fill();
  }
  
};

<canvas />

Canvas 多边形未正确接触

Canvas polygons not touching properly

html

javascript

canvas

一个解决方案

例子

第 1 步 - 将框绘制到屏幕外 canvas:

第 2 步 - 变换主要 canvas 并在屏幕外绘制 canvas

第 3 步（可选）- 互动