From 969df523d622a3bc5afbbcf5b728b3d599406077 Mon Sep 17 00:00:00 2001 From: Toni Oktoro Date: Tue, 30 Nov 2021 12:57:58 +0700 Subject: [PATCH] Reworked multiline watermark text --- CHANGELOG.md | 37 +++++++++++++++++++++++- dist/vue-drawing-canvas.esm.js | 45 +++++++++++++++++------------ dist/vue-drawing-canvas.min.js | 2 +- dist/vue-drawing-canvas.ssr.js | 47 ++++++++++++++++++------------ package.json | 2 +- src/VueDrawingCanvas.ts | 53 ++++++++++++++++++---------------- 6 files changed, 121 insertions(+), 65 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 72aa7af..cd71e94 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,39 @@ -# [v1.0.3](https://github.com/razztyfication/vue-drawing-canvas) +# [v1.0.4](https://github.com/razztyfication/vue-drawing-canvas) + +- Reworked multiline of text for watermark + +example: + +```js +export default { + ... + data() { + return { + ... + watermark: { + type: "Text", + source: `This is\nWatermark + TEXT`, + x: 200, + y: 180, + fontStyle: { + width: 200, + lineHeight: 48, + color: '#FF0000', + font: 'bold 48px roboto', + drawType: 'fill', + textAlign: 'left', + textBaseline: 'top', + rotate: 0 + } + } + } +} +``` + +
+ +# [v1.0.3](https://github.com/razztyfication/vue-drawing-canvas/tree/v1.0.3) - Wrap watermark text to multiline. Thanks to [mishahobanov](https://github.com/mishahobanov) diff --git a/dist/vue-drawing-canvas.esm.js b/dist/vue-drawing-canvas.esm.js index 257c10d..ff8b11c 100644 --- a/dist/vue-drawing-canvas.esm.js +++ b/dist/vue-drawing-canvas.esm.js @@ -361,33 +361,40 @@ var VueDrawingCanvas = /*#__PURE__*/defineComponent({ }, wrapText(context, text, x, y, maxWidth, lineHeight) { - var words = text.split(' '); - var line = ''; - - for (var n = 0; n < words.length; n++) { - var testLine = line + words[n] + ' '; - var metrics = context.measureText(testLine); - var testWidth = metrics.width; + const newLineRegex = /(\r\n|\n\r|\n|\r)+/g; + const whitespaceRegex = /\s+/g; + var lines = text.split(newLineRegex).filter(word => word.length > 0); + + for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) { + var words = lines[lineNumber].split(whitespaceRegex).filter(word => word.length > 0); + var line = ''; + + for (var n = 0; n < words.length; n++) { + var testLine = line + words[n] + ' '; + var metrics = context.measureText(testLine); + var testWidth = metrics.width; + + if (testWidth > maxWidth && n > 0) { + if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') { + context.strokeText(line, x, y); + } else { + context.fillText(line, x, y); + } - if (testWidth > maxWidth && n > 0) { - if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') { - context.strokeText(line, x, y); line = words[n] + ' '; y += lineHeight; } else { - context.fillText(line, x, y); - line = words[n] + ' '; - y += lineHeight; + line = testLine; } + } + + if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') { + context.strokeText(line, x, y); } else { - line = testLine; + context.fillText(line, x, y); } - } - if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') { - context.strokeText(line, x, y); - } else { - context.fillText(line, x, y); + y += words.length > 0 ? lineHeight : 0; } }, diff --git a/dist/vue-drawing-canvas.min.js b/dist/vue-drawing-canvas.min.js index c9ec65c..6265944 100644 --- a/dist/vue-drawing-canvas.min.js +++ b/dist/vue-drawing-canvas.min.js @@ -1 +1 @@ -var VueDrawingCanvas=function(t){"use strict";function e(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function r(t){for(var r=1;r0){var n=document.querySelector("#VueDrawingCanvas").getBoundingClientRect();e=t.touches[0].clientX-n.left,r=t.touches[0].clientY-n.top}else e=t.offsetX,r=t.offsetY;return{x:e,y:r}},startDraw:function(t){if(!this.lock){this.drawing=!0;var e=this.getCoordinates(t);this.strokes={type:this.eraser?"eraser":this.strokeType,from:e,coordinates:[],color:this.eraser?this.backgroundColor:this.color,width:this.lineWidth,fill:!this.eraser&&"dash"!==this.strokeType&&this.fillShape},this.guides=[]}},draw:function(t){if(this.drawing){this.context||this.setContext();var e=this.getCoordinates(t);if(this.eraser||"dash"===this.strokeType)this.strokes.coordinates.push(e),this.drawShape(this.strokes,!1);else{var r;switch(this.strokeType){case"square":r=[{x:e.x,y:this.strokes.from.y},{x:e.x,y:e.y},{x:this.strokes.from.x,y:e.y}];break;case"triangle":var n=Math.floor((e.x-this.strokes.from.x)/2)<0?-1*Math.floor((e.x-this.strokes.from.x)/2):Math.floor((e.x-this.strokes.from.x)/2),i=this.strokes.from.xe.x?this.strokes.from.x-a:this.strokes.from.x+a,y:this.strokes.from.y},{x:a,y:a}]}this.guides=r,this.drawGuide(!0)}}},drawGuide:function(t){var e=this;this.redraw(!1),this.context.strokeStyle="#000000",this.context.lineWidth=1,this.context.lineJoin="round",this.context.lineCap="round",this.context.beginPath(),this.context.setLineDash([15,15]),"circle"===this.strokes.type?this.context.ellipse(this.guides[0].x,this.guides[0].y,this.guides[1].x,this.guides[1].y,0,0,2*Math.PI):(this.context.moveTo(this.strokes.from.x,this.strokes.from.y),this.guides.forEach((function(t){e.context.lineTo(t.x,t.y)})),t&&this.context.closePath()),this.context.stroke()},drawShape:function(t,e){var r=this;this.context.strokeStyle=t.color,this.context.fillStyle=t.color,this.context.lineWidth=t.width,this.context.lineJoin="round",this.context.lineCap="round",this.context.beginPath(),this.context.setLineDash([]),"circle"===t.type?this.context.ellipse(t.coordinates[0].x,t.coordinates[0].y,t.coordinates[1].x,t.coordinates[1].y,0,0,2*Math.PI):(this.context.moveTo(t.from.x,t.from.y),t.coordinates.forEach((function(t){r.context.lineTo(t.x,t.y)})),e&&this.context.closePath()),t.fill?this.context.fill():this.context.stroke()},stopDraw:function(){this.drawing&&(this.strokes.coordinates=this.guides.length>0?this.guides:this.strokes.coordinates,this.images.push(this.strokes),this.redraw(),this.drawing=!1,this.trash=[])},reset:function(){this.lock||(this.images=[],this.strokes={type:"",coordinates:[],color:"",width:"",fill:!1},this.guides=[],this.trash=[],this.redraw())},undo:function(){if(!this.lock){var t=this.images.pop();t&&(this.trash.push(t),this.redraw())}},redo:function(){if(!this.lock){var t=this.trash.pop();t&&(this.images.push(t),this.redraw())}},redraw:function(t){var e=this;return i(regeneratorRuntime.mark((function r(){return regeneratorRuntime.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return t=void 0===t||t,r.next=3,e.setBackground().then((function(){e.images.forEach((function(t){e.drawShape(t,e.type=!1)}))})).then((function(){t&&e.save()}));case 3:case"end":return r.stop()}}),r)})))()},wrapText:function(t,e,r,n,i,a){for(var s=e.split(" "),o="",h=0;hi&&h>0?this.watermark.fontStyle&&this.watermark.fontStyle.drawType&&"stroke"===this.watermark.fontStyle.drawType?(t.strokeText(o,r,n),o=s[h]+" ",n+=a):(t.fillText(o,r,n),o=s[h]+" ",n+=a):o=u}this.watermark.fontStyle&&this.watermark.fontStyle.drawType&&"stroke"===this.watermark.fontStyle.drawType?t.strokeText(o,r,n):t.fillText(o,r,n)},save:function(){var t=this;if(!this.watermark){var e=document.querySelector("#VueDrawingCanvas");return this.$emit("update:image",e.toDataURL("image/"+this.saveAs,1)),e.toDataURL("image/"+this.saveAs,1)}var r=document.querySelector("#VueDrawingCanvas"),n=document.createElement("canvas"),i=n.getContext("2d");if(n.width=this.width,n.height=this.height,i.drawImage(r,0,0,this.width,this.height),"Image"===this.watermark.type){var a=this.watermark.imageStyle&&this.watermark.imageStyle.width?this.watermark.imageStyle.width:this.width,s=this.watermark.imageStyle&&this.watermark.imageStyle.height?this.watermark.imageStyle.height:this.height,o=new Image;o.src=this.watermark.source,o.onload=function(){return i.drawImage(o,t.watermark.x,t.watermark.y,a,s),t.$emit("update:image",n.toDataURL("image/"+t.saveAs,1)),n.toDataURL("image/"+t.saveAs,1)}}else if("Text"===this.watermark.type){var h,u,c=this.watermark.fontStyle&&this.watermark.fontStyle.font?this.watermark.fontStyle.font:"20px serif",l=this.watermark.fontStyle&&this.watermark.fontStyle.textAlign?this.watermark.fontStyle.textAlign:"start",f=this.watermark.fontStyle&&this.watermark.fontStyle.textBaseline?this.watermark.fontStyle.textBaseline:"alphabetic",m=this.watermark.fontStyle&&this.watermark.fontStyle.color?this.watermark.fontStyle.color:"#000000";if(i.font=c,i.textAlign=l,i.textBaseline=f,this.watermark.fontStyle&&this.watermark.fontStyle.rotate)h=this.watermark.fontStyle&&this.watermark.fontStyle.width?this.watermark.x+Math.floor(this.watermark.fontStyle.width/2):this.watermark.x,u=this.watermark.fontStyle&&this.watermark.fontStyle.lineHeight?this.watermark.y+Math.floor(this.watermark.fontStyle.lineHeight/2):this.watermark.y,i.translate(h,u),i.rotate(this.watermark.fontStyle.rotate*Math.PI/180),i.translate(-1*h,-1*u);return this.watermark.fontStyle&&this.watermark.fontStyle.drawType&&"stroke"===this.watermark.fontStyle.drawType?(i.strokeStyle=this.watermark.fontStyle.color,this.watermark.fontStyle&&this.watermark.fontStyle.width?this.wrapText(i,this.watermark.source,this.watermark.x,this.watermark.y,this.watermark.fontStyle.width,this.watermark.fontStyle.lineHeight):i.strokeText(this.watermark.source,this.watermark.x,this.watermark.y)):(i.fillStyle=m,this.watermark.fontStyle&&this.watermark.fontStyle.width?this.wrapText(i,this.watermark.source,this.watermark.x,this.watermark.y,this.watermark.fontStyle.width,this.watermark.fontStyle.lineHeight):i.fillText(this.watermark.source,this.watermark.x,this.watermark.y)),this.$emit("update:image",n.toDataURL("image/"+this.saveAs,1)),n.toDataURL("image/"+this.saveAs,1)}},isEmpty:function(){return!(this.images.length>0)}},render:function(){var e=this;return t.isVue2?t.h("canvas",r({attrs:{id:"VueDrawingCanvas",width:this.width,height:this.height},style:r({touchAction:"none"},this.styles),class:this.classes,on:{mousedown:function(t){return e.startDraw(t)},mousemove:function(t){return e.draw(t)},mouseup:function(t){return e.stopDraw(t)},mouseleave:function(t){return e.stopDraw(t)},touchstart:function(t){return e.startDraw(t)},touchmove:function(t){return e.draw(t)},touchend:function(t){return e.stopDraw(t)},touchleave:function(t){return e.stopDraw(t)},touchcancel:function(t){return e.stopDraw(t)}}},this.$props)):t.h("canvas",{id:"VueDrawingCanvas",height:this.height,width:this.width,style:r({touchAction:"none"},this.styles),class:this.classes,onMousedown:function(t){return e.startDraw(t)},onMousemove:function(t){return e.draw(t)},onMouseup:function(t){return e.stopDraw(t)},onMouseleave:function(t){return e.stopDraw(t)},onTouchstart:function(t){return e.startDraw(t)},onTouchmove:function(t){return e.draw(t)},onTouchend:function(t){return e.stopDraw(t)},onTouchleave:function(t){return e.stopDraw(t)},onTouchcancel:function(t){return e.stopDraw(t)}})}})}(VueDemi); \ No newline at end of file +var VueDrawingCanvas=function(t){"use strict";function e(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function r(t){for(var r=1;r0){var n=document.querySelector("#VueDrawingCanvas").getBoundingClientRect();e=t.touches[0].clientX-n.left,r=t.touches[0].clientY-n.top}else e=t.offsetX,r=t.offsetY;return{x:e,y:r}},startDraw:function(t){if(!this.lock){this.drawing=!0;var e=this.getCoordinates(t);this.strokes={type:this.eraser?"eraser":this.strokeType,from:e,coordinates:[],color:this.eraser?this.backgroundColor:this.color,width:this.lineWidth,fill:!this.eraser&&"dash"!==this.strokeType&&this.fillShape},this.guides=[]}},draw:function(t){if(this.drawing){this.context||this.setContext();var e=this.getCoordinates(t);if(this.eraser||"dash"===this.strokeType)this.strokes.coordinates.push(e),this.drawShape(this.strokes,!1);else{var r;switch(this.strokeType){case"square":r=[{x:e.x,y:this.strokes.from.y},{x:e.x,y:e.y},{x:this.strokes.from.x,y:e.y}];break;case"triangle":var n=Math.floor((e.x-this.strokes.from.x)/2)<0?-1*Math.floor((e.x-this.strokes.from.x)/2):Math.floor((e.x-this.strokes.from.x)/2),i=this.strokes.from.xe.x?this.strokes.from.x-a:this.strokes.from.x+a,y:this.strokes.from.y},{x:a,y:a}]}this.guides=r,this.drawGuide(!0)}}},drawGuide:function(t){var e=this;this.redraw(!1),this.context.strokeStyle="#000000",this.context.lineWidth=1,this.context.lineJoin="round",this.context.lineCap="round",this.context.beginPath(),this.context.setLineDash([15,15]),"circle"===this.strokes.type?this.context.ellipse(this.guides[0].x,this.guides[0].y,this.guides[1].x,this.guides[1].y,0,0,2*Math.PI):(this.context.moveTo(this.strokes.from.x,this.strokes.from.y),this.guides.forEach((function(t){e.context.lineTo(t.x,t.y)})),t&&this.context.closePath()),this.context.stroke()},drawShape:function(t,e){var r=this;this.context.strokeStyle=t.color,this.context.fillStyle=t.color,this.context.lineWidth=t.width,this.context.lineJoin="round",this.context.lineCap="round",this.context.beginPath(),this.context.setLineDash([]),"circle"===t.type?this.context.ellipse(t.coordinates[0].x,t.coordinates[0].y,t.coordinates[1].x,t.coordinates[1].y,0,0,2*Math.PI):(this.context.moveTo(t.from.x,t.from.y),t.coordinates.forEach((function(t){r.context.lineTo(t.x,t.y)})),e&&this.context.closePath()),t.fill?this.context.fill():this.context.stroke()},stopDraw:function(){this.drawing&&(this.strokes.coordinates=this.guides.length>0?this.guides:this.strokes.coordinates,this.images.push(this.strokes),this.redraw(),this.drawing=!1,this.trash=[])},reset:function(){this.lock||(this.images=[],this.strokes={type:"",coordinates:[],color:"",width:"",fill:!1},this.guides=[],this.trash=[],this.redraw())},undo:function(){if(!this.lock){var t=this.images.pop();t&&(this.trash.push(t),this.redraw())}},redo:function(){if(!this.lock){var t=this.trash.pop();t&&(this.images.push(t),this.redraw())}},redraw:function(t){var e=this;return i(regeneratorRuntime.mark((function r(){return regeneratorRuntime.wrap((function(r){for(;;)switch(r.prev=r.next){case 0:return t=void 0===t||t,r.next=3,e.setBackground().then((function(){e.images.forEach((function(t){e.drawShape(t,e.type=!1)}))})).then((function(){t&&e.save()}));case 3:case"end":return r.stop()}}),r)})))()},wrapText:function(t,e,r,n,i,a){for(var s=/\s+/g,o=e.split(/(\r\n|\n\r|\n|\r)+/g).filter((function(t){return t.length>0})),h=0;h0})),c="",l=0;li&&l>0?(this.watermark.fontStyle&&this.watermark.fontStyle.drawType&&"stroke"===this.watermark.fontStyle.drawType?t.strokeText(c,r,n):t.fillText(c,r,n),c=u[l]+" ",n+=a):c=f}this.watermark.fontStyle&&this.watermark.fontStyle.drawType&&"stroke"===this.watermark.fontStyle.drawType?t.strokeText(c,r,n):t.fillText(c,r,n),n+=u.length>0?a:0}},save:function(){var t=this;if(!this.watermark){var e=document.querySelector("#VueDrawingCanvas");return this.$emit("update:image",e.toDataURL("image/"+this.saveAs,1)),e.toDataURL("image/"+this.saveAs,1)}var r=document.querySelector("#VueDrawingCanvas"),n=document.createElement("canvas"),i=n.getContext("2d");if(n.width=this.width,n.height=this.height,i.drawImage(r,0,0,this.width,this.height),"Image"===this.watermark.type){var a=this.watermark.imageStyle&&this.watermark.imageStyle.width?this.watermark.imageStyle.width:this.width,s=this.watermark.imageStyle&&this.watermark.imageStyle.height?this.watermark.imageStyle.height:this.height,o=new Image;o.src=this.watermark.source,o.onload=function(){return i.drawImage(o,t.watermark.x,t.watermark.y,a,s),t.$emit("update:image",n.toDataURL("image/"+t.saveAs,1)),n.toDataURL("image/"+t.saveAs,1)}}else if("Text"===this.watermark.type){var h,u,c=this.watermark.fontStyle&&this.watermark.fontStyle.font?this.watermark.fontStyle.font:"20px serif",l=this.watermark.fontStyle&&this.watermark.fontStyle.textAlign?this.watermark.fontStyle.textAlign:"start",f=this.watermark.fontStyle&&this.watermark.fontStyle.textBaseline?this.watermark.fontStyle.textBaseline:"alphabetic",m=this.watermark.fontStyle&&this.watermark.fontStyle.color?this.watermark.fontStyle.color:"#000000";if(i.font=c,i.textAlign=l,i.textBaseline=f,this.watermark.fontStyle&&this.watermark.fontStyle.rotate)h=this.watermark.fontStyle&&this.watermark.fontStyle.width?this.watermark.x+Math.floor(this.watermark.fontStyle.width/2):this.watermark.x,u=this.watermark.fontStyle&&this.watermark.fontStyle.lineHeight?this.watermark.y+Math.floor(this.watermark.fontStyle.lineHeight/2):this.watermark.y,i.translate(h,u),i.rotate(this.watermark.fontStyle.rotate*Math.PI/180),i.translate(-1*h,-1*u);return this.watermark.fontStyle&&this.watermark.fontStyle.drawType&&"stroke"===this.watermark.fontStyle.drawType?(i.strokeStyle=this.watermark.fontStyle.color,this.watermark.fontStyle&&this.watermark.fontStyle.width?this.wrapText(i,this.watermark.source,this.watermark.x,this.watermark.y,this.watermark.fontStyle.width,this.watermark.fontStyle.lineHeight):i.strokeText(this.watermark.source,this.watermark.x,this.watermark.y)):(i.fillStyle=m,this.watermark.fontStyle&&this.watermark.fontStyle.width?this.wrapText(i,this.watermark.source,this.watermark.x,this.watermark.y,this.watermark.fontStyle.width,this.watermark.fontStyle.lineHeight):i.fillText(this.watermark.source,this.watermark.x,this.watermark.y)),this.$emit("update:image",n.toDataURL("image/"+this.saveAs,1)),n.toDataURL("image/"+this.saveAs,1)}},isEmpty:function(){return!(this.images.length>0)}},render:function(){var e=this;return t.isVue2?t.h("canvas",r({attrs:{id:"VueDrawingCanvas",width:this.width,height:this.height},style:r({touchAction:"none"},this.styles),class:this.classes,on:{mousedown:function(t){return e.startDraw(t)},mousemove:function(t){return e.draw(t)},mouseup:function(t){return e.stopDraw(t)},mouseleave:function(t){return e.stopDraw(t)},touchstart:function(t){return e.startDraw(t)},touchmove:function(t){return e.draw(t)},touchend:function(t){return e.stopDraw(t)},touchleave:function(t){return e.stopDraw(t)},touchcancel:function(t){return e.stopDraw(t)}}},this.$props)):t.h("canvas",{id:"VueDrawingCanvas",height:this.height,width:this.width,style:r({touchAction:"none"},this.styles),class:this.classes,onMousedown:function(t){return e.startDraw(t)},onMousemove:function(t){return e.draw(t)},onMouseup:function(t){return e.stopDraw(t)},onMouseleave:function(t){return e.stopDraw(t)},onTouchstart:function(t){return e.startDraw(t)},onTouchmove:function(t){return e.draw(t)},onTouchend:function(t){return e.stopDraw(t)},onTouchleave:function(t){return e.stopDraw(t)},onTouchcancel:function(t){return e.stopDraw(t)}})}})}(VueDemi); \ No newline at end of file diff --git a/dist/vue-drawing-canvas.ssr.js b/dist/vue-drawing-canvas.ssr.js index 80eeb9e..5f393a4 100644 --- a/dist/vue-drawing-canvas.ssr.js +++ b/dist/vue-drawing-canvas.ssr.js @@ -542,33 +542,44 @@ function _defineProperty(obj, key, value) { }))(); }, wrapText: function wrapText(context, text, x, y, maxWidth, lineHeight) { - var words = text.split(' '); - var line = ''; + var newLineRegex = /(\r\n|\n\r|\n|\r)+/g; + var whitespaceRegex = /\s+/g; + var lines = text.split(newLineRegex).filter(function (word) { + return word.length > 0; + }); + + for (var lineNumber = 0; lineNumber < lines.length; lineNumber++) { + var words = lines[lineNumber].split(whitespaceRegex).filter(function (word) { + return word.length > 0; + }); + var line = ''; - for (var n = 0; n < words.length; n++) { - var testLine = line + words[n] + ' '; - var metrics = context.measureText(testLine); - var testWidth = metrics.width; + for (var n = 0; n < words.length; n++) { + var testLine = line + words[n] + ' '; + var metrics = context.measureText(testLine); + var testWidth = metrics.width; + + if (testWidth > maxWidth && n > 0) { + if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') { + context.strokeText(line, x, y); + } else { + context.fillText(line, x, y); + } - if (testWidth > maxWidth && n > 0) { - if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') { - context.strokeText(line, x, y); line = words[n] + ' '; y += lineHeight; } else { - context.fillText(line, x, y); - line = words[n] + ' '; - y += lineHeight; + line = testLine; } + } + + if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') { + context.strokeText(line, x, y); } else { - line = testLine; + context.fillText(line, x, y); } - } - if (this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') { - context.strokeText(line, x, y); - } else { - context.fillText(line, x, y); + y += words.length > 0 ? lineHeight : 0; } }, save: function save() { diff --git a/package.json b/package.json index e304568..acc55c3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-drawing-canvas", - "version": "1.0.3", + "version": "1.0.4", "author": { "name": "Toni Oktoro", "email": "tonioktoro@gmail.com" diff --git a/src/VueDrawingCanvas.ts b/src/VueDrawingCanvas.ts index d54e265..f0d2971 100644 --- a/src/VueDrawingCanvas.ts +++ b/src/VueDrawingCanvas.ts @@ -325,37 +325,40 @@ export default /*#__PURE__*/defineComponent({ }); }, wrapText(context, text, x, y, maxWidth, lineHeight) { - var words = text.split(' '); - var line = ''; - - for(var n = 0; n < words.length; n++) { - var testLine = line + words[n] + ' '; - var metrics = context.measureText(testLine); - var testWidth = metrics.width; - if (testWidth > maxWidth && n > 0) { - if((this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') ) - { - context.strokeText(line, x, y); + const newLineRegex = /(\r\n|\n\r|\n|\r)+/g + const whitespaceRegex = /\s+/g + var lines = text.split(newLineRegex).filter(word => word.length > 0) + for (let lineNumber = 0; lineNumber < lines.length; lineNumber++) { + var words = lines[lineNumber].split(whitespaceRegex).filter(word => word.length > 0); + var line = ''; + + for(var n = 0; n < words.length; n++) { + var testLine = line + words[n] + ' '; + var metrics = context.measureText(testLine); + var testWidth = metrics.width; + if (testWidth > maxWidth && n > 0) { + if((this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') ) + { + context.strokeText(line, x, y); + } + else{ + context.fillText(line, x, y); + } line = words[n] + ' '; y += lineHeight; } - else{ - context.fillText(line, x, y); - line = words[n] + ' '; - y += lineHeight; + else { + line = testLine; } - } - else { - line = testLine; + if((this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') ) + { + context.strokeText(line, x, y); } - } - if((this.watermark.fontStyle && this.watermark.fontStyle.drawType && this.watermark.fontStyle.drawType === 'stroke') ) - { - context.strokeText(line, x, y); - } - else{ - context.fillText(line, x, y); + else{ + context.fillText(line, x, y); + } + y += words.length > 0 ? lineHeight : 0; } }, save() {