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

Question

我环顾互联网并没有发现任何东西,我看过其他KineticJS示例,它们在矩形上使用了strokeWidth 1,它们看起来都是半透明的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).