Search code examples
javascriptcanvaskonvajs

Fill Color to rotator in transformer konva.js

I want my rotator of transformer to have icon, but first I add fill to learn.

  var rot = transformer.findOne('.rotater');
  console.log(rot); //Works fine
  rot.fill('orange'); //Not working. no need for fill-priority  
  layer.batchDraw();
Solution

  • [email protected] doesn't have API to customize specific anchors of a Konva.Transformer.

    Your code doesn't work, because Konva.Transfomer may reset its style at any point of time with internal tr.update() function.

    As a workaround, you can overwrite update method and add your own styles there:

    const tr = new Konva.Transformer({
  nodes: [shape]
})

tr.update = function() {
  Konva.Transformer.prototype.update.call(tr);
  var rot = this.findOne('.rotater');
  rot.fill('orange');
}

tr.forceUpdate();

layer.add(tr);

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