canvas-comment - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

es/index.js

@@ -415,6 +415,8 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
           _shape$coor = _slicedToArray(shape.coor, 2),
-          _shape$coor$ = _slicedToArray(_shape$coor[0], 1),
+          _shape$coor$ = _slicedToArray(_shape$coor[0], 2),
           x0 = _shape$coor$[0],
-          _shape$coor$2 = _slicedToArray(_shape$coor[1], 1),
-          x1 = _shape$coor$2[0];
+          y0 = _shape$coor$[1],
+          _shape$coor$2 = _slicedToArray(_shape$coor[1], 2),
+          x1 = _shape$coor$2[0],
+          y1 = _shape$coor$2[1];
 
@@ -436,5 +438,3 @@ if (label.length > 0) {
 
-        this.ctx.font = this.labelFont;
-        var posY = toTop ? y - 4 : y + 14;
-        var posX = toleft ? x - Math.min(Math.abs(x0 - x1) * this.scale, this.labelMinWidth) - 2 : x + 2; // 绘制多行文本
+        this.ctx.font = this.labelFont; // 绘制多行文本
 
@@ -455,3 +455,4 @@ var drawTexts = []; //label的宽度可能会稍微比设定的textWidth宽一点点
             // 文字超出
-            for (var i = 0; i < lineText.length; i++) {
+            for (var i = 1; i <= lineText.length; i++) {
+              // substring 第二个参数比要提取的子串的最后一个字符在 string Object中的位置多1，所以要取到最后个字需要到字符串的length
               var str = lineText.substring(lastSubStrIndex, i);
@@ -463,5 +464,3 @@
                 lastSubStrIndex = i;
-              }
-
-              if (i === lineText.length - 1) {
+              } else if (i === lineText.length) {
                 drawTexts.push(str);
@@ -471,7 +470,9 @@ }
           }
-        }); // 绘制文字底色
+        });
+        var posY = toTop ? y - (y1 - y0) * this.scale - this.labelLineHeight * drawTexts.length + 14 : y + 14;
+        var posX = toleft ? this.image.width * this.scale - textWidth - 20 : x + 2; // 绘制文字底色
 
         this.ctx.fillStyle = labelBackgroundColor || this.labelBackgroundColor; // +5 让背景不顶边
 
-        this.ctx.fillRect(x, y, labelMaxWidth + 5, this.labelLineHeight * drawTexts.length); // 设置字体颜色
+        this.ctx.fillRect(posX, posY - this.labelLineHeight + 5, labelMaxWidth + 5, this.labelLineHeight * drawTexts.length); // 设置字体颜色
 
@@ -478,0 +479,0 @@ this.ctx.fillStyle = labelFillStyle || this.labelFillStyle;

lib/index.js

@@ -430,6 +430,8 @@ "use strict";
           _shape$coor = (0, _slicedToArray2["default"])(shape.coor, 2),
-          _shape$coor$ = (0, _slicedToArray2["default"])(_shape$coor[0], 1),
+          _shape$coor$ = (0, _slicedToArray2["default"])(_shape$coor[0], 2),
           x0 = _shape$coor$[0],
-          _shape$coor$2 = (0, _slicedToArray2["default"])(_shape$coor[1], 1),
-          x1 = _shape$coor$2[0];
+          y0 = _shape$coor$[1],
+          _shape$coor$2 = (0, _slicedToArray2["default"])(_shape$coor[1], 2),
+          x1 = _shape$coor$2[0],
+          y1 = _shape$coor$2[1];
 
@@ -451,5 +453,3 @@ if (label.length > 0) {
 
-        this.ctx.font = this.labelFont;
-        var posY = toTop ? y - 4 : y + 14;
-        var posX = toleft ? x - Math.min(Math.abs(x0 - x1) * this.scale, this.labelMinWidth) - 2 : x + 2; // 绘制多行文本
+        this.ctx.font = this.labelFont; // 绘制多行文本
 
@@ -470,3 +470,4 @@ var drawTexts = []; //label的宽度可能会稍微比设定的textWidth宽一点点
             // 文字超出
-            for (var i = 0; i < lineText.length; i++) {
+            for (var i = 1; i <= lineText.length; i++) {
+              // substring 第二个参数比要提取的子串的最后一个字符在 string Object中的位置多1，所以要取到最后个字需要到字符串的length
               var str = lineText.substring(lastSubStrIndex, i);
@@ -478,5 +479,3 @@
                 lastSubStrIndex = i;
-              }
-
-              if (i === lineText.length - 1) {
+              } else if (i === lineText.length) {
                 drawTexts.push(str);
@@ -486,7 +485,9 @@ }
           }
-        }); // 绘制文字底色
+        });
+        var posY = toTop ? y - (y1 - y0) * this.scale - this.labelLineHeight * drawTexts.length + 14 : y + 14;
+        var posX = toleft ? this.image.width * this.scale - textWidth - 20 : x + 2; // 绘制文字底色
 
         this.ctx.fillStyle = labelBackgroundColor || this.labelBackgroundColor; // +5 让背景不顶边
 
-        this.ctx.fillRect(x, y, labelMaxWidth + 5, this.labelLineHeight * drawTexts.length); // 设置字体颜色
+        this.ctx.fillRect(posX, posY - this.labelLineHeight + 5, labelMaxWidth + 5, this.labelLineHeight * drawTexts.length); // 设置字体颜色
 
@@ -493,0 +494,0 @@ this.ctx.fillStyle = labelFillStyle || this.labelFillStyle;

package.json

 {
   "name": "canvas-comment",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

57210

increased by1.08%

Lines of code

1325

increased by0.3%

No dependency changes