Reactjs 在react konva Transformer中是否可以使用图标作为旋转器

我想在react konva transformer中使用自定义图标作为旋转器，如下所示：

在当前时刻（使用

konva@7.0.4

），没有官方API对变压器内部进行如此大的更改

但作为一种解决方法，您可以使用monkey patch

transformer.update（）

函数将您自己的样式添加到任何锚中

从“React”导入React；
从“react dom”导入{render}；
从“react konva”导入{Stage，Layer，Rect，Transformer}；
从“Konva”进口Konva；
从“使用图像”导入使用图像；
常量图标=
数据：数据：图像/svg+xml；Bas64，PD94BBWWWBWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWBBZZZZ6，Pvv6，BBBWWWVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVZZZZZZZZZZZZZZZZZZZZZZZZZZZZZLLLLLLLLLLVVVVVVVVVVVVVLLLLLLLLTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTlze5ot2.2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 6 6 6 6 6 6 6 6 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 LTU3LJI2.2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 KPGC+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=“；
常量应用=（）=>{
const shapeRef=React.useRef（）；
const trRef=React.useRef（）；
常量[图标]=使用图像（图标）；
React.useffect（（）=>{
如果（！图标）{
返回；
}
常数tr=trRef.电流；
tr.nodes（[shapeRef.current]）；
var rot=tr.findOne（“.rotater”）；
//生成旋转器背景
const iconCanvas=document.createElement（“画布”）；
iconCanvas.width=rot.width（）；
iconCanvas.height=旋转高度（）；
const ctx=iconCanvas.getContext（“2d”）；
ctx.fillStyle=“白色”；
ctx.fillRect（0,0，iconCanvas.WITH，iconCanvas.height）；
ctx.drawImage（图标，0，0，iconCanvas.width，iconCanvas.height）；
tr.update=函数（）{
Konva.Transformer.prototype.update.call（tr）；
var rot=这个.findOne（“.rotater”）；
//废弃填料
rot.fill（空）；
//启用图标
rot.fillPatternImage（iconCanvas）；
};
tr.update（）；
tr.getLayer（）.draw（）；
}，[图标]；
返回(
);
};
渲染(