边界框 konva js 中的变压器控件答案

【问题标题】：Transformer controls in bounding box konva js边界框 konva js 中的变压器控件
【发布时间】：2018-12-04 20:47:07
【问题描述】：

我在我的项目中使用 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();
});

【问题讨论】：

标签： javascript konvajs react-konva konvajs-reactjs

【解决方案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

【讨论】：

谢谢！这就是我需要的！