5

我浏览了互联网，一无所获，我查看了其他 KineticJS 示例，这些示例在其矩形上使用 1 的 strokeWidth 并且它们似乎都有一条半透明的 2 像素线，而不是一条清晰的 1 像素不透明黑线.

现在，我猜测由于谷歌没有任何解决方案非常简单或不可能，但是..你知道我如何使用 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);
});

图。1

有人有什么想法吗？

4

4 回答 4

9

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

图形系统根据坐标是用于角还是中心而有所不同，但您可以通过一些试验来解决问题 - 您只需在坐标上添加半个像素宽度并重试。

对于 html5 画布 (0,0) 是左上角，所以如果你没有变换我猜左上角像素中心在 (0.5, 0.5)。

于 2012-04-27T19:34:28.297 回答
3

另一种方法：如果您使用整数作为坐标和正交 1px 权重线，那么您可以将整个舞台移动 [0.5, 0.5] 并且您不必在每个坐标上添加半个像素，然后您可以使用整数与您的整个舞台一样的坐标将向右移动一半像素，向下移动相同。

于 2014-01-30T08:19:20.437 回答
2

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

于 2013-03-13T22:38:15.503 回答
2

使用 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
});

也就是说，并非所有物品都能从这个技巧中受益。事实上，有些人变得更加模糊。因此，请确保在最原子级别应用偏移，以避免污染无法从中受益的形状。

于 2014-06-13T02:35:21.083 回答