Управление трансформатором в ограничительной коробке konva js

Question

Я использую Konva JS в своем проекте, и я столкнулся с проблемой с Transformer. Я создал ограничивающую рамку на холсте для загрузки изображения, и я могу манипулировать ею (изменять размер / перемещать / вращать), но контроллеры Transformer накладываются, когда они выходят за пределы рамки.

Можно ли сделать их видимыми все время? Даже когда изображение выходит за рамки?

демонстрация

Код:

const stage = new Konva.Stage({
   container: 'container',
   width: window.innerWidth,
   height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const path = new Konva.Path({
     x: 0,
   y: 0,
     data: "M0.814892542,343.532846 C-0.671367458,341.755846 0.6544,330.568 6.5236,309.219 C13.5052,282.749 18.4391,265.387 21.3254,257.132 C25.6549,244.749 44.6482,191.031 47.5142,182.763 C49.4248,177.251 64.9993,138.001 94.238,65.011 C108.625,34.862 117.715,17.328 121.508,12.411 C122.478,22.115 134.1,39.806 141.681,58.818 C146.438,70.186 138.702,138.568 133.42,187.268 C130.355,215.522 129.054,237.17 129.054,237.17 C129.054,237.17 111.649,268.482 106.584,280.442 C101.519,292.402 95.103,302.369 90.1935,314.703 C83.5141,328.221 69.3761115,358.461881 65.7875115,362.340881 C65.5190637,362.48917 64.06254,360.370853 61.7510008,359.453946 C60.7675137,359.06383 59.3342927,359.741625 57.9707746,359.648288 C56.5888705,359.553693 55.2736301,358.687467 53.824317,358.207586 C48.5327687,356.983114 43.9395465,352.564914 37.1918177,350.429331 C35.3144093,349.63623 34.084213,350.228389 32.2289402,349.63623 C30.3736675,349.04407 28.4993278,348.287931 26.5327162,347.758477 C20.7753608,345.470468 19.5143874,345.334144 16.8321827,345.784 C15.5181813,344.166321 13.8180985,344.166321 12.4131721,343.909 C9.94110556,343.456226 8.14517603,343.560341 6.93119498,343.339846 C3.74151187,342.760504 1.28027456,344.592162 0.814892542,343.532846 Z",
   dash: [8, 4],
   lineJoin: 'round',
   stroke: "#5DBB46",
   strokeEnabled: true,
   strokeWidth: 2,
});

const src = 'http://i.imgur.com/3tU4Vig.jpg';
Konva.Image.fromURL(src, function(image) {
  // make it draggable
  image.setAttrs({
    draggable: true,
    x: 50,
    y: 100,
    width: 100,
    height: 100
  });
  const transformer = new Konva.Transformer();

    transformer.attachTo(image);
  layer.add(transformer);
  // append to layer
  layer.add(image);
  // update layer
  layer.draw();
})

layer.add(path).draw();

layer.clipFunc(() => {
    path.draw();
});

Answer 1

Интересно. Ты используешь clipFunc это способ, который не разработан Konva, Но похоже, что это работает.

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

var group = new Konva.Group({
  clipFunc: (ctx) => {
    path.sceneFunc().call(path, ctx, path);
  }
});
layer.add(group);

const src = 'http://i.imgur.com/3tU4Vig.jpg';
Konva.Image.fromURL(src, function(image) {
  // make it draggable
  image.setAttrs({
    draggable: true,
    x: 50,
    y: 100,
    width: 100,
    height: 100
  });
  const transformer = new Konva.Transformer();
    layer.add(transformer);
    transformer.attachTo(image);

  group.add(image);
  // update layer
  layer.draw();
})

layer.add(path).draw();

https://jsbin.com/purezecodu/1/edit?html,js,output