У меня есть изображение, которое находится в слое KineticJS. Когда я устанавливаю штрих с шириной> 1, изображение будет перекрывать ход в некоторых точках. Вот JSFiddle, который я сделал:
На этом изображении показана проблема:
Мой код:
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 900
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function () {
var kimage = new Kinetic.Image({
x: 10,
y: 10,
image: imageObj
});
kimage.strokeEnabled(true);
kimage.stroke("#1788a8");
kimage.strokeWidth(11);
// add the shape to the layer
layer.add(kimage);
// add the layer to the stage
stage.add(layer);
};
imageObj.src = 'https://upload.wikimedia.org/wikipedia/commons/d/da/CatBlackHearts.png';
Как я могу предотвратить совпадение изображения с штрихом?
Ход холста всегда нарисован полу-внутри и наполовину вне его ограничивающего прямоугольника.
Границей является размер изображения.
Поэтому ваш синий ход составляет 11/2 = 6,5 пикселя внутри вашего изображения.
Таким образом, чтобы ваша граница была полностью вне изображения, вы должны нарисовать границу отдельно от изображения.