canvas-comment - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

es/index.js

@@ -34,2 +34,3 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
     _this.imageHeight = void 0;
+    _this.imageCrossOrigin = void 0;
     _this.scaleStep = void 0;
@@ -47,3 +48,3 @@ _this.movePoint = void 0;
     _this.labelLineHeight = 20;
-    _this.labelFont = '14px serif';
+    _this.labelFont = '14px Arial';
     _this.labelFillStyle = 'red';
@@ -77,2 +78,9 @@ _this.rectStrokeStyle = 'red';
   _createClass(CanvasComment, [{
+    key: "ratio",
+    get: function get() {
+      var dpr = window.devicePixelRatio || 1;
+      var bsr = this.ctx['webkitBackingStorePixelRatio'] || this.ctx['mozBackingStorePixelRatio'] || this.ctx['msBackingStorePixelRatio'] || this.ctx['oBackingStorePixelRatio'] || this.ctx['backingStorePixelRatio'] || 1;
+      return dpr / bsr;
+    }
+  }, {
     key: "scale",
@@ -307,3 +315,3 @@ get: function get() {
       this.image.src = url;
-      this.image.setAttribute("crossOrigin", 'Anonymous');
+      this.imageCrossOrigin && this.image.setAttribute('crossOrigin', this.imageCrossOrigin);
     } // 缩放图片
@@ -428,3 +436,4 @@
         this.ctx.save();
-        this.ctx.fillStyle = labelFillStyle || this.labelFillStyle;
+        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.font = this.labelFont;
@@ -459,5 +468,9 @@ var posY = toTop ? y - 4 : y + 14;
         });
+        this.ctx.strokeStyle = 'white';
         drawTexts.forEach(function (text, i) {
+          // this.ctx.strokeText(text, posX, posY + this.labelLineHeight * i);
           _this5.ctx.fillText(text, posX, posY + _this5.labelLineHeight * i);
         });
+        this.ctx.fill(); // this.ctx.stroke();
+
         this.ctx.restore();
@@ -464,0 +477,0 @@ }

examples/index.js

@@ -9,2 +9,4 @@ import CanvasComment from 'canvas-comment';
 canvas.on('load', () => {
+  document.querySelector('.container').height = canvas.image.height * 500 / canvas.image.width;
+
   canvas.setData([
@@ -11,0 +13,0 @@ {

lib/index.js

@@ -50,2 +50,3 @@ "use strict";
     _this.imageHeight = void 0;
+    _this.imageCrossOrigin = void 0;
     _this.scaleStep = void 0;
@@ -63,3 +64,3 @@ _this.movePoint = void 0;
     _this.labelLineHeight = 20;
-    _this.labelFont = '14px serif';
+    _this.labelFont = '14px Arial';
     _this.labelFillStyle = 'red';
@@ -93,2 +94,9 @@ _this.rectStrokeStyle = 'red';
   (0, _createClass2["default"])(CanvasComment, [{
+    key: "ratio",
+    get: function get() {
+      var dpr = window.devicePixelRatio || 1;
+      var bsr = this.ctx['webkitBackingStorePixelRatio'] || this.ctx['mozBackingStorePixelRatio'] || this.ctx['msBackingStorePixelRatio'] || this.ctx['oBackingStorePixelRatio'] || this.ctx['backingStorePixelRatio'] || 1;
+      return dpr / bsr;
+    }
+  }, {
     key: "scale",
@@ -322,3 +330,3 @@ get: function get() {
       this.image.src = url;
-      this.image.setAttribute("crossOrigin", 'Anonymous');
+      this.imageCrossOrigin && this.image.setAttribute('crossOrigin', this.imageCrossOrigin);
     } // 缩放图片
@@ -443,3 +451,4 @@
         this.ctx.save();
-        this.ctx.fillStyle = labelFillStyle || this.labelFillStyle;
+        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.font = this.labelFont;
@@ -474,5 +483,9 @@ var posY = toTop ? y - 4 : y + 14;
         });
+        this.ctx.strokeStyle = 'white';
         drawTexts.forEach(function (text, i) {
+          // this.ctx.strokeText(text, posX, posY + this.labelLineHeight * i);
           _this5.ctx.fillText(text, posX, posY + _this5.labelLineHeight * i);
         });
+        this.ctx.fill(); // this.ctx.stroke();
+
         this.ctx.restore();
@@ -479,0 +492,0 @@ }

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

51648

decreased by-2.74%

Number of package files

8

decreased by-20%

Lines of code

1172

decreased by-7.42%

No dependency changes