Changing the Transformer rotation anchor point to a custom icon does not take effect

[wuwentao-web]

const tr = new Konva.Transformer({ rotateLineVisible: false, rotateAnchorOffset: 13, anchorSize: 7, rotationSnaps: [0, 90, 180, 270], enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'], flipEnabled: false, anchorStyleFunc: (anchor) => { if (anchor.getAttrs().name === 'rotater _anchor') { Debug.Log(anchor) // 通过设置锚点为图片来自定义旋转图标 var imageObj = new Image(); imageObj.onload = function () { anchor.fill(''); anchor.stroke('') anchor.fillPatternImage(imageObj); }; imageObj.src = instructionsDraw; } } }) this.transformerLayer.add(tr); tr.nodes([image])
Not effective, the picture is fine

[lavrton]

Looks like you are creating new image object inside anchorStyleFunc. Don't do that. anchorStyleFunc` will be called very frequently. You need to load image outside of that function and then use it inside.

var imageObj = new Image();
imageObj.src = instructionsDraw;
const tr = new Konva.Transformer({
  rotateLineVisible: false,
  rotateAnchorOffset: 13,
  anchorSize: 7,
  rotationSnaps: [0, 90, 180, 270],
  enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
  flipEnabled: false,
  anchorStyleFunc: (anchor) => {
    if (anchor.getAttrs().name === 'rotater _anchor' && imageObj.complete) {
        anchor.fill('');
        anchor.stroke('');
        anchor.fillPatternImage(imageObj);
    }
  },
});
this.transformerLayer.add(tr);
tr.nodes([image]);