Question

当我在图层中并排放置两个rects并在该图层上设置比例时，我将在这两个rects之间找到一个间隙。

示例：http://plnkr.co/edit/wT5F3mqstZWp5T66qeoU?p=preview

任何想法如何摆脱它？

Answer 1

<强> [编辑]

看看这里：

http://blog.idrsolutions.com/2012/09/handling-floating-point-coordinates-with-pixels-in-svg-html5-canvas/

问题来自缩放时浮点位置的舍入误差。

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

  // Position rounding error
  ctx.fillStyle="green";
  ctx.lineWidth=0;
  ctx.fillRect(0,5,5,5);
  ctx.fillRect(0.25,10,5,5);
  ctx.fillRect(0.5,15,5,5);
  ctx.fillRect(0.75,20,5,5);
  ctx.fillRect(1,25,5,5);
  ctx.fillRect(5,5,5,5);
  ctx.fillRect(5.25,10,5,5);
  ctx.fillRect(5.5,15,5,5);
  ctx.fillRect(5.75,20,5,5);
  ctx.fillRect(6,25,5,5);

当位置不是整数时，浏览器将设置1个像素的alpha衰落，其alpha值与非整数部分成比例。当你将这两个乐队放在一起时，结果并不是完整的颜色（我不知道他们为什么这么决定），你可以在这个小提琴中看到：

http://jsfiddle.net/siliconball/7JPdV/

示例中的矩形的初始位置为4.

  var rect1 = new Kinetic.Rect({
    x: 4,
    y: 4,
    width: 100,
    height: 50,
    fill: 'green',
  });

然后当图层按1.6缩放时，新x的最终结果是4 * 1.6 = 6.4。这使得出现舍入误差并在2层之间产生这种间隙效应。如果初始位置为0,5,10,15，..则没有间隙，因为此位置的舍入误差为0。

  var rect1 = new Kinetic.Rect({
    x: 5,
    y: 4,
    width: 100,
    height: 50,
    fill: 'green',
  });

解决此问题的一种可能方法是在缩放图层后设置位置，并在执行此操作时考虑缩放系数。我不能再考虑任何建议，因为我不知道你的应用程序的细节，但看起来（希望我错了）这是一个无法直接解决的问题。

KineticJS：某些尺度上的形状之间的间隙

1 个答案: