边界框 konva js 中的转换器控件

Question

我在我的项目中使用 Konva JS，但我遇到了 Transformer 的问题。我已经在 canvas 上创建了用于图像上传的边界框，我可以使用它进行操作（resize/move around/rotate）但是当 Transformer 控制器超出边界框时，它们会被覆盖。

是否可以让它们一直可见？即使图像超出边界框？

Demo

代码：

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

边界框 konva js 中的转换器控件

Transformer controls in bounding box konva js

javascript

konvajs

react-konva

konvajs-reactjs