KineticJS: Как я могу предотвратить наложение изображения на мазок?

0

У меня есть изображение, которое находится в слое KineticJS. Когда я устанавливаю штрих с шириной> 1, изображение будет перекрывать ход в некоторых точках. Вот JSFiddle, который я сделал:

На этом изображении показана проблема:

Изображение 174551

Мой код:

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';

Как я могу предотвратить совпадение изображения с штрихом?

Теги:
canvas
kineticjs

1 ответ

1
Лучший ответ

Ход холста всегда нарисован полу-внутри и наполовину вне его ограничивающего прямоугольника.

Границей является размер изображения.

Поэтому ваш синий ход составляет 11/2 = 6,5 пикселя внутри вашего изображения.

Таким образом, чтобы ваша граница была полностью вне изображения, вы должны нарисовать границу отдельно от изображения.

  • 0
    Как нарисовать границу отдельно от изображения?
  • 1
    (1) Создайте группу, (2) добавьте заштрихованный прямоугольник в группу, которая больше ширины и высоты, чем изображение на 11 пикселей (3) добавьте ваше изображение в группу с x = 6.5 и y = 6.5.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню