diff --git a/packages/core/plugin/PolygonModifyPlugin.ts b/packages/core/plugin/PolygonModifyPlugin.ts index b49bb1a3..05b6f946 100644 --- a/packages/core/plugin/PolygonModifyPlugin.ts +++ b/packages/core/plugin/PolygonModifyPlugin.ts @@ -90,21 +90,24 @@ function renderIconEdge( left: number, top: number, styleOverride: any, - fabricObject: fabric.Object + fabricObject: fabric.Object, + img: HTMLImageElement ) { - const img = document.createElement('img'); - img.src = edgeImg; drawImg(ctx, left, top, img, 25, 25, fabric.util.degreesToRadians(fabricObject.angle || 0)); } class PolygonModifyPlugin implements IPluginTempl { public isEdit: boolean; + private img: HTMLImageElement; static pluginName = 'PolygonModifyPlugin'; static events = []; static apis = ['toggleEdit', 'activeEdit', 'inActiveEdit']; constructor(public canvas: fabric.Canvas, public editor: IEditor) { this.isEdit = false; + const img = document.createElement('img'); + img.src = edgeImg; + this.img = img; this.init(); } init() { @@ -124,6 +127,7 @@ class PolygonModifyPlugin implements IPluginTempl { this._ensureEvent(poly); if (poly.points == null) return; const lastControl = poly.points.length - 1; + const This = this; poly.controls = poly.points.reduce>(function ( acc, point, @@ -133,7 +137,7 @@ class PolygonModifyPlugin implements IPluginTempl { positionHandler: polygonPositionHandler, actionHandler: anchorWrapper(index > 0 ? index - 1 : lastControl, actionHandler), actionName: 'modifyPolygon', - render: (...args) => renderIconEdge(...args), + render: (...args) => renderIconEdge(...args, This.img), }); Object.defineProperty(acc['p' + index], 'pointIndex', { value: index }); return acc;