canvas-arrow - npm Package Compare versions

Comparing version 1.0.1 to 1.1.1

dist/canvas-arrow.js

 "use strict";
-/** 画箭头*/
-CanvasRenderingContext2D.prototype.drawArrow = function (x0, y0, x1, y1, width) {
+CanvasRenderingContext2D.prototype.arrow = CanvasRenderingContext2D.prototype.drawArrow = function (x0, y0, x1, y1, width) {
     if (width === void 0) { width = 3; }
@@ -45,1 +44,17 @@ if (width < 3)
 };
+CanvasRenderingContext2D.prototype.strokeArrow = function (x0, y0, x1, y1, width) {
+    if (width === void 0) { width = 3; }
+    this.save();
+    this.beginPath();
+    this.arrow(x0, y0, x1, y1, width);
+    this.stroke();
+    this.restore();
+};
+CanvasRenderingContext2D.prototype.fillArrow = function (x0, y0, x1, y1, width) {
+    if (width === void 0) { width = 3; }
+    this.save();
+    this.beginPath();
+    this.arrow(x0, y0, x1, y1, width);
+    this.fill();
+    this.restore();
+};

dist/canvas-arrow.min.js

@@ -1,1 +0,1 @@
-"use strict";CanvasRenderingContext2D.prototype.drawArrow=function(x0,y0,x1,y1,width){if(width===void 0){width=3}if(width<3)width=3;var polarCoordinate2canvasCoordinate=function(x0,y0,r,radian){var x=r*Math.cos(radian);var y=r*Math.sin(radian);x+=x0;y+=y0;return{x:x,y:y}};var distance=Math.sqrt((y1-y0)*(y1-y0)+(x1-x0)*(x1-x0));var radian=Math.asin(Math.abs(y1-y0)/distance);if(x0>x1&&y1>y0){radian=Math.PI-radian}else if(x0>x1&&y0>y1){radian+=Math.PI}else if(x1>x0&&y0>y1){radian=2*Math.PI-radian}var _a=polarCoordinate2canvasCoordinate(x0,y0,distance-width*2,radian),x=_a.x,y=_a.y;var p1=polarCoordinate2canvasCoordinate(x,y,width,radian-Math.PI*.5);var p2=polarCoordinate2canvasCoordinate(x,y,width*2,radian-Math.PI*.5);var p3=polarCoordinate2canvasCoordinate(x,y,width,radian+Math.PI*.5);var p4=polarCoordinate2canvasCoordinate(x,y,width*2,radian+Math.PI*.5);this.moveTo(x0,y0);this.lineTo(p1.x,p1.y);this.lineTo(p2.x,p2.y);this.lineTo(x1,y1);this.lineTo(p4.x,p4.y);this.lineTo(p3.x,p3.y);this.closePath()};
+"use strict";CanvasRenderingContext2D.prototype.arrow=CanvasRenderingContext2D.prototype.drawArrow=function(x0,y0,x1,y1,width){if(width===void 0){width=3}if(width<3)width=3;var polarCoordinate2canvasCoordinate=function(x0,y0,r,radian){var x=r*Math.cos(radian);var y=r*Math.sin(radian);x+=x0;y+=y0;return{x:x,y:y}};var distance=Math.sqrt((y1-y0)*(y1-y0)+(x1-x0)*(x1-x0));var radian=Math.asin(Math.abs(y1-y0)/distance);if(x0>x1&&y1>y0){radian=Math.PI-radian}else if(x0>x1&&y0>y1){radian+=Math.PI}else if(x1>x0&&y0>y1){radian=2*Math.PI-radian}var _a=polarCoordinate2canvasCoordinate(x0,y0,distance-width*2,radian),x=_a.x,y=_a.y;var p1=polarCoordinate2canvasCoordinate(x,y,width,radian-Math.PI*.5);var p2=polarCoordinate2canvasCoordinate(x,y,width*2,radian-Math.PI*.5);var p3=polarCoordinate2canvasCoordinate(x,y,width,radian+Math.PI*.5);var p4=polarCoordinate2canvasCoordinate(x,y,width*2,radian+Math.PI*.5);this.moveTo(x0,y0);this.lineTo(p1.x,p1.y);this.lineTo(p2.x,p2.y);this.lineTo(x1,y1);this.lineTo(p4.x,p4.y);this.lineTo(p3.x,p3.y);this.closePath()};CanvasRenderingContext2D.prototype.strokeArrow=function(x0,y0,x1,y1,width){if(width===void 0){width=3}this.save();this.beginPath();this.arrow(x0,y0,x1,y1,width);this.stroke();this.restore()};CanvasRenderingContext2D.prototype.fillArrow=function(x0,y0,x1,y1,width){if(width===void 0){width=3}this.save();this.beginPath();this.arrow(x0,y0,x1,y1,width);this.fill();this.restore()};

package.json

 {
   "name": "canvas-arrow",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "为canvas ctx扩展画箭头的方法",
@@ -5,0 +5,0 @@ "main": "./dist/canvas-arrow.js",

README.md

@@ -27,3 +27,3 @@ ## 效果
         ctx.fillStyle = "black";
-        ctx.drawArrow(10, 10, 80, 100);
+        ctx.arrow(10, 10, 80, 100);//或ctx.drawArrow(10, 10, 80, 100)
         ctx.fill();
@@ -40,2 +40,14 @@ ctx.restore();
         ctx.restore();
+
+        //3、使用strokeArrow方法
+        ctx.save();
+        ctx.strokeStyle = "green";
+        ctx.strokeArrow(200, 200, 110, 110, 7);
+        ctx.restore();
+
+        //4、使用fillArrow方法
+        ctx.save();
+        ctx.fillStyle = "brown";
+        ctx.fillArrow(200, 200, 180, 100, 7);
+        ctx.restore();
     </script>
@@ -46,3 +58,3 @@ </body>
 * 效果  
-<img src="https://raw.githubusercontent.com/destiny-wenlun/canvas-arrow/master/img/demo1.png"  />
+<img src="https://raw.githubusercontent.com/destiny-wenlun/canvas-arrow/master/img/demo.jpg"  />
 
@@ -61,3 +73,3 @@ * npm 模块开发
 ctx.fillStyle = "black";
-ctx.drawArrow(10, 10, 80, 100);
+ctx.arrow(10, 10, 80, 100);//或ctx.drawArrow(10, 10, 80, 100)
 ctx.fill();
@@ -74,7 +86,32 @@ ctx.restore();
 ctx.restore();
+
+//3、使用strokeArrow方法
+ctx.save();
+ctx.strokeStyle = "green";
+ctx.strokeArrow(200, 200, 110, 110, 7);
+ctx.restore();
+
+//4、使用fillArrow方法
+ctx.save();
+ctx.fillStyle = "brown";
+ctx.fillArrow(200, 200, 180, 100, 7);
+ctx.restore();
 ```
 * 效果  
-<img src="https://raw.githubusercontent.com/destiny-wenlun/canvas-arrow/master/img/demo1.png"  />
+<img src="https://raw.githubusercontent.com/destiny-wenlun/canvas-arrow/master/img/demo.jpg"  />
 
-## 方法参数说明 drawArrow(x0,y0,x1,y1,width)
+## 方法说明
+|方法|说明|
+|-|-|
+|arrow|描绘箭头路径|
+|drawArrow|与arrow方法作用相同|
+|strokeArrow|描绘箭头路径，并画出箭头线条|
+|fillArrow|填充描绘的箭头路径|
+
+## 方法参数说明
+* arrow(x0,y0,x1,y1,width)  
+* drawArrow(x0,y0,x1,y1,width)  
+* strokeArrow(x0,y0,x1,y1,width)  
+* fillArrow(x0,y0,x1,y1,width)  
+
 |参数|说明|默认值|
@@ -81,0 +118,0 @@ |-|-|-|

src/canvas-arrow.ts

 interface CanvasRenderingContext2D {
     /**
-     * 画箭头
+      * 描绘箭头路径，需要自己stroke或fill
+      * @param x0 起点x坐标
+      * @param y0 起点y坐标
+      * @param x1 终点x坐标
+      * @param y1 终点y坐标
+      * @param width 箭头宽度，默认为3，且最小值是3
+      */
+    arrow(x0: number, y0: number, x1: number, y1: number, width?: number): any
+
+    /**
+     * 与arrow方法相同，建议使用arrow
      * @param x0 起点x坐标
@@ -11,6 +21,25 @@ * @param y0 起点y坐标
     drawArrow(x0: number, y0: number, x1: number, y1: number, width?: number): any
+
+    /**
+     * 画箭头线条，
+     * @param x0 起点x坐标
+     * @param y0 起点y坐标
+     * @param x1 终点x坐标
+     * @param y1 终点y坐标
+     * @param width 箭头宽度，默认为3，且最小值是3
+     */
+    strokeArrow(x0: number, y0: number, x1: number, y1: number, width?: number): any
+
+    /**
+     * 填充一个箭头
+     * @param x0 起点x坐标
+     * @param y0 起点y坐标
+     * @param x1 终点x坐标
+     * @param y1 终点y坐标
+     * @param width 箭头宽度，默认为3，且最小值是3
+     */
+    fillArrow(x0: number, y0: number, x1: number, y1: number, width?: number): any
 }
 
-/** 画箭头*/
-CanvasRenderingContext2D.prototype.drawArrow = function (x0, y0, x1, y1, width = 3) {
+CanvasRenderingContext2D.prototype.arrow = CanvasRenderingContext2D.prototype.drawArrow = function (x0, y0, x1, y1, width = 3) {
     if (width < 3) width = 3;//最小宽度
@@ -54,2 +83,18 @@ /**极坐标[以(x0,y0)为原点] 转换 画布坐标 */
     this.closePath();
-};
+};
+
+CanvasRenderingContext2D.prototype.strokeArrow = function (x0, y0, x1, y1, width = 3) {
+    this.save();
+    this.beginPath();
+    this.arrow(x0, y0, x1, y1, width);
+    this.stroke();
+    this.restore();
+}
+
+CanvasRenderingContext2D.prototype.fillArrow = function (x0, y0, x1, y1, width = 3) {
+    this.save();
+    this.beginPath();
+    this.arrow(x0, y0, x1, y1, width);
+    this.fill();
+    this.restore();
+}

types/canvas-arrow.d.ts

 interface CanvasRenderingContext2D {
     /**
-     * 画箭头
+      * 描绘箭头路径，需要自己stroke或fill
+      * @param x0 起点x坐标
+      * @param y0 起点y坐标
+      * @param x1 终点x坐标
+      * @param y1 终点y坐标
+      * @param width 箭头宽度，默认为3，且最小值是3
+      */
+    arrow(x0: number, y0: number, x1: number, y1: number, width?: number): any;
+    /**
+     * 与arrow方法相同，建议使用arrow
      * @param x0 起点x坐标
@@ -11,2 +20,20 @@ * @param y0 起点y坐标
     drawArrow(x0: number, y0: number, x1: number, y1: number, width?: number): any;
+    /**
+     * 画箭头线条，
+     * @param x0 起点x坐标
+     * @param y0 起点y坐标
+     * @param x1 终点x坐标
+     * @param y1 终点y坐标
+     * @param width 箭头宽度，默认为3，且最小值是3
+     */
+    strokeArrow(x0: number, y0: number, x1: number, y1: number, width?: number): any;
+    /**
+     * 填充一个箭头
+     * @param x0 起点x坐标
+     * @param y0 起点y坐标
+     * @param x1 终点x坐标
+     * @param y1 终点y坐标
+     * @param width 箭头宽度，默认为3，且最小值是3
+     */
+    fillArrow(x0: number, y0: number, x1: number, y1: number, width?: number): any;
 }

No alert changes

Improved metrics

Total package byte prevSize

13317

50.1%

Lines of code

186

78.85%

Number of lines in readme file

119

45.12%

No dependency changes