5

私はインターネットを見回しましたが、何も見つかりませんでした。長方形で 1 の strokeWidth を使用する他の KineticJS の例を見てきましたが、それらはすべて、鮮明な 1 ピクセルの不透明な黒い線ではなく、半透明の 2 ピクセルの線を持っているように見えます。 .

さて、Google には解決策が本当に単純であるか不可能であるとは思えないので、KineticJS を使用して 1 ピクセルの境界線を取得する方法を知っていますか?

$(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 に答える
2

必要なものを正確に取得するためのクールなアプローチがあります。2つの類似した形状をグループ化します。下のレベルのものは、上のレベルのものよりも1ピクセル大きくなっています。一番下の色を境界線に必要な色（この場合は黒）で塗りつぶします。私にとっては問題なく動作し、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 に答える