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

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

1 个答案: