繁体   English   中英

画布多边形没有正确接触

Canvas polygons not touching properly

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

所以我一直在摆弄画布元素,我似乎遇到了一个非常恼人的情况,但我还是找不到解决方案。 假设在画布上绘制了两个多边形,并且它们应该相互接触。 如下绘制一个多边形:

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

这个小提琴实现了一个简单的版本。

你可能会看到这些形状之间有一条细线。 我怎么能避免呢? 我在这里尝试了解决方案,但他们似乎并没有真正提到这种情况,因为我正在处理对角线。

2 个回复

一个解决方案

你总是可以使用中风线技巧,但取决于你的目标:

如果要显示彼此相邻的多个多边形,则可以将多边形视为简单的正方形。

  • 将它们画在彼此相邻的离屏画布中。 这将产生没有间隙的结果。
  • 然后将主画布转换为您希望这些多边形出现的位置。 根据目标添加旋转和/或倾斜。
  • 最后,将离屏画布作为图像绘制到主画布上。 问题消失了。

这将为您提供准确的结果,没有额外的步骤,并且框的计算变得非常简单和快速(想想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步 - 转换主画布并在离屏画布上绘制

当使用变换集绘制到主画布时,结果将是(伪随机变换仅显示):

snap2

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

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

一个常见的解决方法是在多边形周围放置一个半像素,相同颜色的笔划:

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

1 在画布上绘制多边形

我正在使用MVVM创建一个桌面应用程序。 我接受某些数据,然后根据它们绘制出多边形的模型。 我想在具有可见轴和网格线的坐标平面上表示这些多边形。 我不确定是否可以在画布上使用Graphics.DrawPolygon来完成此操作,因此您可以建议可以帮助我的库吗? ...

2 从画布获取多边形的点

在C#中为Pixelsense实现WPF应用程序 。 为了检测多边形重叠(这是下一阶段),我很难找到在屏幕上放置了多边形的特定点。 总共,我的应用程序中可以有7个多边形,下面是我尝试获得其点的代码。 我认为代码理想地要做的是开始一个循环,创建一个多边形(形状1),然后开始第二个循环 ...

2015-08-07 02:46:19 1 106   c#
4 更改画布多边形1面的lineWidth吗?

我一直在使用基于此JSFiddle( http://jsfiddle.net/qQA88/ )中的代码的代码来创建六角形网格。 我试图弄清楚如何用较粗的线勾勒出六边形的组,以表示各种“领土”。 HexagonGrid.prototype.drawHex()是并排绘制每个六边形的代码……特别是 ...

5 为什么我的JavaScript /画布多边形无法填充?

因此,我创建了一个程序,该程序将从本地网络服务器获取美国坐标列表。 客户端可以通过发出简单的GET请求来获取这些坐标。 我试图逐个填写州,但是这似乎不起作用。 我填写这些的代码如下 由于某些原因,这不能满足要求。 它会用黑色轮廓绘制它们,但填充不会发生。 我已经将数据汇总了,可 ...

6 在画布jQuery HTML中绘制多边形

找到了本教程,可以在画布上绘制多边形。 我不太了解它的工作原理,我制作多边形的条件是位置(北,南,东,西)和边长。 For example i want 50px north 50px south 50px east 50px west那么这将是方形的。我如何使用此示例代码来实现此目的 ...

8 多边形绘制不正确

我正在尝试使用坐标绘制一些多边形。 这些坐标表示沿着序列(x轴)的多个要素的相对位置,并针对多个条件(y轴)重复进行。 当x轴值相同时,可以正确绘制这些多边形,但是在x轴值不同时则不能正确绘制-我必须在这里遗漏一些有关ggplot如何绘制多边形但无法解决的问题! (我对使用ggplot非常 ...

2019-10-12 12:36:53 1 36   r/ ggplot2
9 MapBox多边形无法正确显示

我一直在玩着带有“洞”的多边形(以匹配重叠的多边形等)。 我找到了一种方法来获取带有多边形的geojson,但是当在MapBox上显示时,它显示出奇怪的效果。 geojson是 这是Leaflet的例子 - 这是正确显示的 - http://jsfiddle.net/prasmo ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM