为变压器中的旋转器填充颜色 konva.js

Question

我想让我的变压器旋转器有图标，但是我先添加填充来学习。

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

Answer 1

konva@7.0.4 没有 API 来自定义 Konva.Transformer 的特定锚点。

您的代码不起作用，因为 Konva.Transfomer 可能随时使用内部 tr.update() 函数重置其样式。

作为解决方法，您可以覆盖 update 方法并在其中添加您自己的样式：

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);

演示：https://jsbin.com/lumisacayo/1/edit?html,js,output

为变压器中的旋转器填充颜色 konva.js

Fill Color to rotator in transformer konva.js

javascript

canvas

konvajs