diff --git a/src/tiny-image-editor/src/components/Upload.tsx b/src/tiny-image-editor/src/components/Upload.tsx index 02c6724fa7593fab0352af46908a4211d55eb9e6..80c094333a11e2c29f477857b661fc3de47c6178 100644 --- a/src/tiny-image-editor/src/components/Upload.tsx +++ b/src/tiny-image-editor/src/components/Upload.tsx @@ -68,7 +68,12 @@ function annotationsInit(imgData,canvas,historyRef){ }); break; case 'arrow' : - newObject = new ArrowClass(annotation.pointList||[annotation.left,annotation.top,annotation.left,annotation.top], { + let pointList = annotation.pointList||[annotation.left,annotation.top,annotation.left,annotation.top] + pointList[0] = pointList[0]*scaleX; + pointList[1] = pointList[1]*scaleY; + pointList[2] = pointList[2]*scaleX; + pointList[3] = pointList[3]*scaleY; + newObject = new ArrowClass(pointList, { strokeWidth: annotation.size* Math.max(scaleX, scaleY), stroke: annotation.stroke, id: new Date().valueOf() + '_' + Math.random() * 4, @@ -76,14 +81,18 @@ function annotationsInit(imgData,canvas,historyRef){ newObject.strokeUniform = true; break; case 'path' : - const adjustedPath = annotation.path.map((segment) => { - if (typeof segment[1] === 'number') { - segment[1] *= scaleX; + const adjustedPath = annotation.path.map((segment) => { + const newSegment = [...segment]; + for (let i = 1; i < newSegment.length; i++) { + if (typeof newSegment[i] === 'number') { + if (i % 2 === 1) { + newSegment[i] *= scaleX; + } else { + newSegment[i] *= scaleY; + } + } } - if (typeof segment[2] === 'number') { - segment[2] *= scaleY; - } - return segment; + return newSegment; }); newObject = new fabric.Path(adjustedPath, { fill: annotation.fill,