Geek Answers Handbook

KineticJS strokeWidth of 1 causes a blurry translucent line instead of a sharp 1-pixel line

I searched the Internet and found nothing, I looked at other KineticJS examples that use a stroke width of 1 on their rectangles, and they all seem to be a translucent 2-pixel line, rather than a nice sharp 1px opaque black line.

Now I assume that since Google has nothing, the solution would be really simple or impossible, but ... do you know how I can get one px border using KineticJS?

$(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);
});

Fig 1

Does anyone have any ideas?

+5
source share
4 answers

(x, y1) (x, y2) (, ), , x " ". " ", . ( ).

, , , - .

html5 (0,0) - , , , , (0,5, 0,5).

+9

: Integer 1px, [0.5, 0.5], , , , .

+3

, , : . , , . , ( : ). CSS

+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
});

However, not all things benefit from this trick. Some, in fact, become more crazy. Therefore, be sure to apply displacement at the atomic level itself to avoid contaminating shapes that do not benefit him.

+2
source

More articles:


All Articles