canvas-comment - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

es/index.js

@@ -49,2 +49,3 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
     _this.labelFillStyle = 'red';
+    _this.labelBackgroundColor = 'white';
     _this.rectStrokeStyle = 'red';
@@ -411,2 +412,3 @@ _this.createType = void 0;
       var labelFillStyle = shape.labelFillStyle,
+          labelBackgroundColor = shape.labelBackgroundColor,
           _shape$label = shape.label,
@@ -433,4 +435,3 @@ label = _shape$label === void 0 ? '' : _shape$label,
         var toTop = this.image.height - point[1] < 16 / this.scale;
-        this.ctx.save();
-        this.ctx.fillStyle = labelFillStyle || this.labelFillStyle; // this.ctx.fillRect(toleft ? (x - textWidth - 3) : (x + 1), toTop ? (y - 15) : y + 1, textWidth + 4, 16);
+        this.ctx.save(); // this.ctx.fillRect(toleft ? (x - textWidth - 3) : (x + 1), toTop ? (y - 15) : y + 1, textWidth + 4, 16);
 
@@ -441,4 +442,6 @@ this.ctx.font = this.labelFont;
 
-        var drawTexts = []; // 1.先通过换行符分割
+        var drawTexts = []; //label的宽度可能会稍微比设定的textWidth宽一点点
 
+        var labelMaxWidth = 0; // 1.先通过换行符分割
+
         newStr.split('\n').forEach(function (lineText) {
@@ -450,2 +453,3 @@ // 每次开始截取的字符串的索引
             // 单行文本
+            labelMaxWidth = Math.max(_this5.ctx.measureText(lineText).width, labelMaxWidth);
             drawTexts.push(lineText);
@@ -458,2 +462,3 @@ } else {
               if (_this5.ctx.measureText(str).width >= textWidth) {
+                labelMaxWidth = Math.max(_this5.ctx.measureText(str).width, labelMaxWidth);
                 drawTexts.push(str);
@@ -468,6 +473,19 @@ lastSubStrIndex = i;
           }
-        });
-        this.ctx.strokeStyle = 'white';
+        }); // 绘制文字底色
+
+        this.ctx.fillStyle = labelBackgroundColor || this.labelBackgroundColor; // +5 让背景不顶边
+
+        this.ctx.fillRect(x, y, labelMaxWidth + 5, this.labelLineHeight * drawTexts.length); // 设置字体颜色
+
+        this.ctx.fillStyle = labelFillStyle || this.labelFillStyle;
         drawTexts.forEach(function (text, i) {
+          // 描边+阴影方式 加底色
+          // this.ctx.shadowColor="black";
+          // this.ctx.shadowBlur=2;
+          // this.ctx.lineWidth=6;
+          // this.ctx.strokeStyle="white";
           // this.ctx.strokeText(text, posX, posY + this.labelLineHeight * i);
+          // this.ctx.shadowBlur=0;
+          // this.ctx.fillStyle="red";
+          // this.ctx.fillText(text, posX, posY + this.labelLineHeight * i);
           _this5.ctx.fillText(text, posX, posY + _this5.labelLineHeight * i);
@@ -474,0 +492,0 @@ });

lib/index.js

@@ -65,2 +65,3 @@ "use strict";
     _this.labelFillStyle = 'red';
+    _this.labelBackgroundColor = 'white';
     _this.rectStrokeStyle = 'red';
@@ -426,2 +427,3 @@ _this.createType = void 0;
       var labelFillStyle = shape.labelFillStyle,
+          labelBackgroundColor = shape.labelBackgroundColor,
           _shape$label = shape.label,
@@ -448,4 +450,3 @@ label = _shape$label === void 0 ? '' : _shape$label,
         var toTop = this.image.height - point[1] < 16 / this.scale;
-        this.ctx.save();
-        this.ctx.fillStyle = labelFillStyle || this.labelFillStyle; // this.ctx.fillRect(toleft ? (x - textWidth - 3) : (x + 1), toTop ? (y - 15) : y + 1, textWidth + 4, 16);
+        this.ctx.save(); // this.ctx.fillRect(toleft ? (x - textWidth - 3) : (x + 1), toTop ? (y - 15) : y + 1, textWidth + 4, 16);
 
@@ -456,4 +457,6 @@ this.ctx.font = this.labelFont;
 
-        var drawTexts = []; // 1.先通过换行符分割
+        var drawTexts = []; //label的宽度可能会稍微比设定的textWidth宽一点点
 
+        var labelMaxWidth = 0; // 1.先通过换行符分割
+
         newStr.split('\n').forEach(function (lineText) {
@@ -465,2 +468,3 @@ // 每次开始截取的字符串的索引
             // 单行文本
+            labelMaxWidth = Math.max(_this5.ctx.measureText(lineText).width, labelMaxWidth);
             drawTexts.push(lineText);
@@ -473,2 +477,3 @@ } else {
               if (_this5.ctx.measureText(str).width >= textWidth) {
+                labelMaxWidth = Math.max(_this5.ctx.measureText(str).width, labelMaxWidth);
                 drawTexts.push(str);
@@ -483,6 +488,19 @@ lastSubStrIndex = i;
           }
-        });
-        this.ctx.strokeStyle = 'white';
+        }); // 绘制文字底色
+
+        this.ctx.fillStyle = labelBackgroundColor || this.labelBackgroundColor; // +5 让背景不顶边
+
+        this.ctx.fillRect(x, y, labelMaxWidth + 5, this.labelLineHeight * drawTexts.length); // 设置字体颜色
+
+        this.ctx.fillStyle = labelFillStyle || this.labelFillStyle;
         drawTexts.forEach(function (text, i) {
+          // 描边+阴影方式 加底色
+          // this.ctx.shadowColor="black";
+          // this.ctx.shadowBlur=2;
+          // this.ctx.lineWidth=6;
+          // this.ctx.strokeStyle="white";
           // this.ctx.strokeText(text, posX, posY + this.labelLineHeight * i);
+          // this.ctx.shadowBlur=0;
+          // this.ctx.fillStyle="red";
+          // this.ctx.fillText(text, posX, posY + this.labelLineHeight * i);
           _this5.ctx.fillText(text, posX, posY + _this5.labelLineHeight * i);
@@ -489,0 +507,0 @@ });

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

56598

9.58%

Number of package files

10

25%

Lines of code

1321

12.71%

No dependency changes