畫布多邊形沒有正確接觸

Question

所以我一直在擺弄畫布元素，我似乎遇到了一個非常惱人的情況，但我還是找不到解決方案。 假設在畫布上繪制了兩個多邊形，並且它們應該相互接觸。 如下繪制一個多邊形：

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();

這個小提琴實現了一個簡單的版本。

你可能會看到這些形狀之間有一條細線。 我怎么能避免呢？ 我在這里嘗試了解決方案，但他們似乎並沒有真正提到這種情況，因為我正在處理對角線。

Answer 1

一個解決方案

你總是可以使用中風線技巧，但取決於你的目標：

如果要顯示彼此相鄰的多個多邊形，則可以將多邊形視為簡單的正方形。

• 將它們畫在彼此相鄰的離屏畫布中。 這將產生沒有間隙的結果。
• 然后將主畫布轉換為您希望這些多邊形出現的位置。 根據目標添加旋轉和/或傾斜。
• 最后，將離屏畫布作為圖像繪制到主畫布上。 問題消失了。

這將為您提供准確的結果，沒有額外的步驟，並且框的計算變得非常簡單和快速（想想2d網格）。

你必須使用離屏畫布。 如果轉換主畫布並在形狀中繪制，則會遇到與現有問題相同的問題。 這是因為每個點都被變換，如果需要插值，則將分別計算每個路徑形狀。 在圖像中繪制將在整個表面上添加插值，並且僅在存在間隙的位置（非不透明的alpha）。 由於我們已經“無差距”，這不再是一個問題。

這將需要額外的步驟來計划正確放置它們，但這是一個簡單的步驟。

例

第1步 - 將框繪制到離屏畫布中：

此代碼在屏幕外畫布上繪制，導致兩個框沒有間隙：

（該示例使用屏幕顯示結果，請參閱下一步使用屏幕外畫布）

 var ctx = document.querySelector("canvas").getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 50, 50); ctx.fillRect(60, 10, 50, 50); 

 <canvas/> 

第2步 - 轉換主畫布並在離屏畫布上繪制

當使用變換集繪制到主畫布時，結果將是（偽隨機變換僅顯示）：

 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步（可選） - 互動

如果您想與框進行交互，只需應用相同的變換，然后為框添加路徑並針對鼠標位置進行點擊測試。 重繪單個狀態，通過清除擦除並在頂部繪制屏幕外畫布：

 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 /> 

Answer 2

是的，當填充的多邊形導致這個微小的間隙時，這很煩人。 在理論上應該滿足的對角線上尤其常見。

一個常見的解決方法是在多邊形周圍放置一個半像素，相同顏色的筆划：

//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>