jmgraph 3.2.9 → 3.2.10

package/example/controls/resize.html

@@ -47,7 +47,7 @@
                 fill: 'yellow',
                 lineWidth: 2, //边线宽
 				rotation: {
-					angle: Math.PI / 3
+					angle: 0
 				},
                 //小方块样式
                 rectStyle: {

package/example/controls/test.html

@@ -19,6 +19,7 @@
 	</body>
     <script type="module">	
         import {jmGraph} from "../../index.js";
+        import {jmRect} from "../../src/shapes/jmRect.js";
         import {jmPath} from "../../src/core/jmPath.js";
     /**
      * 测试
@@ -91,7 +92,211 @@
         }
     } 
 
+    // 图片裁剪框
+    class ImageEditCover extends jmPath {
+    constructor(params = {}) {      
+        super(params);      
+        this.style.close = this.style.close || true;
+        this.init(params);
+    }
+    // 初始化控件元素
+    init(params) {
+        this.width = this.width || '100%';
+        this.height = this.height || '100%';
+        // 生成层
+        const rectStyle = {
+            stroke: 'transparent',
+            fill: 'rgba(100,100,100,0.4)',
+            lineWidth: 0.1,
+            zIndex: 1,
+        };
+        const graph = (this.graph || params.graph);
+        const leftRect = graph.createShape(jmRect, {
+            position:{x:0, y:0 },
+            width: 0,
+            height: '100%',
+            style: rectStyle,
+            interactive: false
+        });
+        const topRect = graph.createShape(jmRect, {
+            position:{x:0, y:0 },
+            width: '100%',
+            height: 0,
+            style: rectStyle,
+            interactive: false
+        });
+        const rightRect = graph.createShape(jmRect, {
+            position:{x:0, y:0 },
+            width: 0,
+            height: '100%',
+            style: rectStyle,
+            interactive: false
+        });
+        const bottomRect = graph.createShape(jmRect, {
+            position:{x:0, y:0 },
+            width: '100%',
+            height: 0,
+            style: rectStyle,
+            interactive: false
+        });
+        this.rects.push(leftRect, topRect, rightRect, bottomRect);
+        this.children.add(leftRect);
+        this.children.add(topRect);
+        this.children.add(rightRect);
+        this.children.add(bottomRect);
+
+        const controlStyle = {
+            lineWidth: 3,        
+            stroke: '#fff',
+            zIndex: 100,
+        }
+        const c1 = graph.createShape(jmPath, {
+            style: controlStyle,
+            interactive: true
+        });
+        const c2 = graph.createShape(jmPath, {
+            style: controlStyle,
+            interactive: true
+        });
+        const c3 = graph.createShape(jmPath, {
+            style: controlStyle,
+            interactive: true
+        });
+        const c4 = graph.createShape(jmPath, {
+            style: controlStyle,
+            interactive: true
+        });
+        this.controls.push(c1, c2, c3, c4);
+        
+        this.children.add(c1);
+        this.children.add(c2);
+        this.children.add(c3);
+        this.children.add(c4);
+
+        c1.canMove(true);
+        c2.canMove(true);
+        c3.canMove(true);
+        c4.canMove(true);
+        
+    }
+
+    // 裁剪的目录区域
+    // 最终改变结果也是这个参数
+    targetBounds = {
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+    }
+
+    rects = [];
+    // 操作折角
+    controls = [];
+
+    /**
+     * 初始化图形点
+     * 控件都是由点形成
+     * 
+     * @method initPoint
+     * @private
+     * @for jmArc
+     */
+    initPoints() {    
+        //可以获取当前控件的左上坐标，可以用来画相对位置
+        const location = this.getLocation();//获取位置参数      
+
+        const targetLeft = location.width / 2 - this.targetBounds.width / 2;
+        const targetRight = location.width / 2 + this.targetBounds.width / 2;
+        const targetBottom = this.targetBounds.y + this.targetBounds.height;
+
+        this.rects[0].width = targetLeft + 0.1;
+
+        this.rects[1].height = this.targetBounds.y;
+        this.rects[1].width = this.targetBounds.width + 0.1;
+        this.rects[1].position.x = targetLeft;
+
+        this.rects[2].width = location.width - targetRight;
+        this.rects[2].position.x = targetRight;
+
+        this.rects[3].height = location.height - targetBottom;
+        this.rects[3].width = this.targetBounds.width + 0.1;
+        this.rects[3].position.x = targetLeft;
+        this.rects[3].position.y = targetBottom;
+        
+        return this.points;
+    }
+    resetControlsPosition() {
+        //可以获取当前控件的左上坐标，可以用来画相对位置
+        const location = this.getLocation();//获取位置参数      
+
+        const targetLeft = location.width / 2 - this.targetBounds.width / 2;
+        const targetRight = location.width / 2 + this.targetBounds.width / 2;
+        const targetBottom = this.targetBounds.y + this.targetBounds.height;
 
+        // 操作折角位置
+        const controlWidth = 10;
+        const controlLineWidth = this.controls[0].style.lineWidth || 2;
+        this.controls[0].points = [
+            {
+            x: targetLeft - controlLineWidth/2,
+            y: this.targetBounds.y + controlWidth
+            },
+            {
+            x: targetLeft - controlLineWidth/2,
+            y: this.targetBounds.y - controlLineWidth/2
+            },
+            {
+            x: targetLeft + controlWidth,
+            y: this.targetBounds.y - controlLineWidth/2
+            }
+        ];
+
+        this.controls[1].points = [
+            {
+            x: targetRight - controlWidth,
+            y: this.targetBounds.y - controlLineWidth/2
+            },
+            {
+            x: targetRight + controlLineWidth/2,
+            y: this.targetBounds.y - controlLineWidth/2
+            },
+            {
+            x: targetRight + controlLineWidth/2,
+            y: this.targetBounds.y + controlWidth
+            }
+        ];
+
+        this.controls[2].points = [
+            {
+            x: targetRight - controlWidth,
+            y: targetBottom  + controlLineWidth/2
+            },
+            {
+            x: targetRight + controlLineWidth/2,
+            y: targetBottom + controlLineWidth/2
+            },
+            {
+            x: targetRight + controlLineWidth/2,
+            y: targetBottom - controlWidth
+            }
+        ];
+
+        this.controls[3].points = [
+            {
+            x: targetLeft - controlLineWidth/2,
+            y: targetBottom - controlWidth
+            },
+            {
+            x: targetLeft - controlLineWidth/2,
+            y: targetBottom + controlLineWidth/2
+            },
+            {
+            x: targetLeft + controlWidth,
+            y: targetBottom + controlLineWidth/2
+            }
+        ];
+    }
+    } 
     var container = document.getElementById('mycanvas_container');
 
     var g = jmGraph.create(container, {
@@ -125,6 +330,25 @@
         g.children.add(t);            
         t.canMove(true);
 
+        const editorCover = g.createShape(ImageEditCover, {
+          style: {
+            fill: 'transparent',
+            stroke: 'transparent',
+          },
+          interactive: true
+        });
+
+        editorCover.targetBounds = {
+            x: 100,
+            y: 100,
+            width: 200,
+            height: 300,
+        };
+        //editorCover.visible = false;
+        g.children.add(editorCover); 
+
+        editorCover.resetControlsPosition();
+
         function update() {
             if(g.needUpdate) g.redraw();
             requestAnimationFrame(update);

package/package.json

@@ -1,7 +1,7 @@
 {
   "family": "jmgraph",
   "name": "jmgraph",
-  "version": "3.2.9",
+  "version": "3.2.10",
   "description": "一个简单的canvas画图库",
   "homepage": "http://graph.jm47.com/",
   "keywords": [

package/src/core/jmControl.js

@@ -1151,13 +1151,13 @@ export default class jmControl extends jmProperty {
 		if(ps && ps.length) {
 			const rotation = this.getRotation(null, bounds);//获取当前旋转参数
 			//如果有旋转参数，则需要转换坐标再处理
-			if(rotation && rotation.angle != 0) {
+			if(rotation && rotation.angle) {
 				ps = jmUtils.clone(ps, true);//拷贝一份数据
 				//rotateX ,rotateY 是相对当前控件的位置
 				ps = jmUtils.rotatePoints(ps, {
 					x: rotation.x + bounds.left,
 					y: rotation.y + bounds.top
-				}, rotation.angle);
+				}, rotation.angle || 0);
 			}
 			//如果当前路径不是实心的
 			//就只用判断点是否在边上即可	
@@ -1210,6 +1210,7 @@ export default class jmControl extends jmProperty {
 		if(this.visible === false) return ;//如果不显示则不响应事件	
 		if(!args.position) {		
 			const graph = this.graph;
+			args.isWXMiniApp = graph.isWXMiniApp;
 
 			const srcElement = args.srcElement || args.target;			
 			
@@ -1222,7 +1223,8 @@ export default class jmControl extends jmProperty {
 				ctrlKey: args.ctrlKey,
 				cancel : false,
 				event: args, // 原生事件
-				srcElement : srcElement
+				srcElement : srcElement,
+				isWXMiniApp: graph.isWXMiniApp,
 			};		
 		}
 		args.path = args.path||[]; //事件冒泡路径

package/src/core/jmUtils.js

@@ -334,9 +334,16 @@ export default class jmUtils {
         let ox = evt.offsetX;
         let oy = evt.offsetY;
         if(typeof ox === 'undefined' && typeof oy === 'undefined') {
-            let p = this.getElementPosition(target);
-            ox= px - p.left;
-            oy = py - p.top;
+            // 小程序下取x,y就是它的相对坐标
+            if(evt.isWXMiniApp) {
+                ox = evt.x;
+                oy = evt.y;
+            }
+            else {
+                let p = this.getElementPosition(target);
+                ox= px - p.left;
+                oy = py - p.top;
+            }
         }
         if(scale) {
             if(scale.x) ox = ox / scale.x;

package/src/shapes/jmImage.js

@@ -175,7 +175,10 @@ export default class jmImage extends jmControl {
 		//如果当次计算过，则不重复计算
 		if(this.bounds && !isReset) return this.bounds;
 		let rect = {};
-		let img = this.getImage();
+		let img = this.getImage() || {
+			width: 0,
+			height: 0
+		};
 		let p = this.getLocation();
 		let w = p.width || img.width;
 		let h = p.height || img.height;