KineticJS strokeWidth为1会导致模糊的半透明线而不是锐利的1像素线

Question

我环顾互联网并没有发现任何东西，我查看了其他在矩形上使用strokeWidth为1的KineticJS示例，它们看起来都是半透明的2像素线，而不是一个漂亮的锐利1px不透明的黑线。

现在，我猜测Google没有任何解决方案真的很简单或不可能，但是......你知道如何使用KineticJS获得一个px边框吗？

$(window).load(function(){
    var stage = new Kinetic.Stage({container: "kineticdiv", width: 700, height: 400});
    var layer = new Kinetic.Layer();

    var rect = new Kinetic.Rect({
        x: stage.attrs.width/2, y: stage.attrs.height/2,
        width: 100, height: 100,
        fill: "#eee", stroke: "black", strokeWidth: 1
    });

    layer.add(rect);
    stage.add(layer);
});

有人有任何想法吗？

Answer 1

当你从（x，y1）到（x，y2）画一条线时（比如说;对于水平线也是如此），你需要担心x是否“在像素的中间”。如果这条线是“像素之间”那么它将是一半而另一半。结果看起来模糊（它基本上是抗锯齿）。

图形系统的坐标是否适用于角落或中心，但您可以通过稍微尝试来解决问题 - 您只需要将半个像素宽度添加到坐标并重试。

在html5画布（0,0）的情况下是左上角，所以如果你没有变换我猜左上角的像素中心是（0.5,0.5）。

Answer 2

另一种方法：如果你使用整数作为坐标和ortogonal 1px权重线，那么你可以将整个舞台移动[0.5,0.5]而你不必将一半像素添加到每个坐标，那么你可以使用整数作为坐标，因为整个舞台将向右移动一半像素，向右移动一半。

Answer 3

有一种很酷的方法可以准确地得到你想要的东西：将两个相似的形状分组。较低级别的一个像素大于顶部的一个像素。在底部填充您想要边框的颜色（在您的情况下：黑色）。对我来说很好，并具有CSS的精度和质量

Answer 4

使用Kinetic解决此问题的最简单方法是使用偏移属性。因此，不是移动您正在绘制的内容的个别坐标，而是整个线条/形状/组/图层/阶段偏移那么多，理论上可以最小化地将其移动到您想要的位置：

var rect = new Kinetic.Rect({
    x: stage.attrs.width/2, y: stage.attrs.height/2,
    width: 100, height: 100,
    fill: "#eee", stroke: "black", strokeWidth: 1,
    offsetX: 0.5,
    offsetY: 0.5
});

或者，一次性获得一大堆东西：

var layer = new Kinetic.Layer({
    offsetX: 0.5,
    offsetY: 0.5
});

尽管如此，并非所有项目都能从这个技巧中受益。事实上，有些人变得模糊不清。因此，请确保在最原子水平上应用偏移，以避免污染不会从中受益的形状。