在变压器 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