Transformer controls in bounding box konva js

Question

I'm using Konva JS in my project and i'm facing a problem with Transformer. I've created bounding box on canvas for image uploading and i can manipulate with it(resize/move around/rotate) but Transformer controllers is overlaid when they are out of bounding box.

Is it possible to make them visible all the time? Even when image out of bounding box?

Demo

Code:

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

Interesting. You are using clipFunc is a way that is not designed by Konva. But looks like it works.

So your clip function is applied to the whole layer included Transformer. To resolve your issue you can add the image into group and apple clip into the group:

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