From 38f7b1a6e26c0f5538319b443c034820931515bd Mon Sep 17 00:00:00 2001 From: joylink_cuiweidong <364937672@qq.com> Date: Wed, 4 Sep 2019 18:48:53 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20=E6=97=B6=E9=97=B4?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=8B=96=E6=8B=BD=20=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E4=B8=8D=E6=9B=B4=E6=96=B0=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ibp/mouseController.js | 46 +++++++++---------- src/ibp/shape/clock.js | 94 ++++++++++++++++++++++++++------------ 2 files changed, 86 insertions(+), 54 deletions(-) diff --git a/src/ibp/mouseController.js b/src/ibp/mouseController.js index e1f276b49..4a7f64db9 100644 --- a/src/ibp/mouseController.js +++ b/src/ibp/mouseController.js @@ -104,18 +104,16 @@ class MouseController extends Eventful { const draggingTarget = e.target; // draggingTarget.draggable if (draggingTarget) { - if (e.target.parent.getName()=='background') { + if (e.target.parent.name=='background') { this._draggingName='background'; - } else if (this.isAllowDragging&&e.target.parent.getName()=='simple') { + } else if (this.isAllowDragging&&e.target.parent.name=='simple') { this._draggingName='simple'; - } else if (this.isAllowDragging&&e.target.parent.getName()=='group') { + } else if (this.isAllowDragging&&e.target.parent.name=='group') { this._draggingName='group'; this._offsetX=e.offsetX; this._offsetY=e.offsetY; - // debugger; // this._draggingTarget.parent.model.point - - } else if (this.isAllowDragging&&e.target.parent.getName()=='group_child') { + } else if (this.isAllowDragging&&(e.target.parent.name=='group_child'||e.target.name=='group_child')) { this._draggingName='group_child'; this._offsetX=e.offsetX; this._offsetY=e.offsetY; @@ -127,13 +125,6 @@ class MouseController extends Eventful { this._dragging = true; // this.dispatchToElement(param(draggingTarget, e), 'dragstart', e.event); } - - // var x = e.offsetX; - // var y = e.offsetY; - - // this._x = x; - // this._y = y; - // this._dragging = true; } mousemove(e) { @@ -161,39 +152,44 @@ class MouseController extends Eventful { } else if (this.isAllowDragging&&this._draggingTarget&&this._draggingName=='simple') { this._draggingTarget.drift(dx, dy, e); return true; - } else if (this.isAllowDragging&&this._draggingTarget&&(this._draggingName=='group'||this._draggingName=='group_child')) { - // debugger; - if (this._draggingName=='group') { - // this._draggingTarget.parent.model.point.x+=dx; - // this._draggingTarget.parent.model.point.y+=dy; - // this._draggingTarget.parent.dirty(); + } else if (this.isAllowDragging&&this._draggingTarget&&(this._draggingName=='group_child')) { + // this._draggingName=='group'|| + if (this._draggingTarget.parent.parent.name=='group') { this._draggingTarget.parent.drift(dx, dy, e); return true; } else { this._draggingTarget.parent.parent.drift(dx, dy, e); return true; } + // if (this._draggingName=='group') { + // // this._draggingTarget.parent.model.point.x+=dx; + // // this._draggingTarget.parent.model.point.y+=dy; + // // this._draggingTarget.parent.dirty(); + // this._draggingTarget.parent.drift(dx, dy, e); + // return true; + // } else { + // this._draggingTarget.parent.parent.drift(dx, dy, e); + // return true; + // } } } else { - // debugger; return true; } } mouseup(e) { - // debugger; const draggingTarget = this._draggingTarget; if (!eventTool.notLeftMouse(e)&&draggingTarget) { if (this._draggingName=='simple') { console.log(); } else if (this._draggingName=='group'||this._draggingName=='group_child') { - if (this._draggingName=='group') { - this._draggingTarget.parent.setModal(e.offsetX - this._offsetX, e.offsetY - this._offsetY); - this._draggingTarget.parent.dirty(); + if (this._draggingTarget.parent.parent.name=='group') { + this._draggingTarget.parent.parent.setModal(e.offsetX - this._offsetX, e.offsetY - this._offsetY); + this._draggingTarget.parent.parent.dirty(); } else { this._draggingTarget.parent.parent.parent.setModal(e.offsetX - this._offsetX, e.offsetY - this._offsetY); - this._draggingTarget.parent.parent.dirty(); + this._draggingTarget.parent.dirty(); } } this._dragging = false; diff --git a/src/ibp/shape/clock.js b/src/ibp/shape/clock.js index 80b664ae8..ae0743958 100644 --- a/src/ibp/shape/clock.js +++ b/src/ibp/shape/clock.js @@ -31,24 +31,34 @@ export default class clock extends Group { } create() { + this.grouper=new Group({ + id: this.model.code, + position: [this.model.point.x, this.model.point.y] + }); this.clockBg = new Image({ zlevel: this.zlevel, z: this.z, style: { image: clockBg, - x: this.model.point.x, - y: this.model.point.y, + // x: this.model.point.x, + // y: this.model.point.y, + x: 0, + y: 0, width: this.model.width, height: this.model.width/493*156 } }); + this.clockBg.name ='group_child'; this.num1 = new Image({ zlevel: this.zlevel, z: this.z, + name: 'group_child', style: { image: this.getImagePic('0'), - x: this.model.point.x+this.model.width*0.1, - y: this.model.point.y+this.model.width*0.052, + // x: this.model.point.x+this.model.width*0.1, + // y: this.model.point.y+this.model.width*0.052, + x: this.model.width*0.1, + y: this.model.width*0.052, width: this.model.width*0.1, height: this.model.width*0.1/37*74 } @@ -56,10 +66,13 @@ export default class clock extends Group { this.num2 = new Image({ zlevel: this.zlevel, z: this.z, + name: 'group_child', style: { image: this.getImagePic('0'), - x: this.model.point.x+this.model.width*0.22, - y: this.model.point.y+this.model.width*0.052, + // x: this.model.point.x+this.model.width*0.22, + // y: this.model.point.y+this.model.width*0.052, + x: this.model.width*0.22, + y: this.model.width*0.052, width: this.model.width*0.1, height: this.model.width*0.1/37*74 } @@ -67,10 +80,13 @@ export default class clock extends Group { this.num3 = new Image({ zlevel: this.zlevel, z: this.z, + name: 'group_child', style: { image: this.getImagePic('0'), - x: this.model.point.x+this.model.width*0.39, - y: this.model.point.y+this.model.width*0.052, + // x: this.model.point.x+this.model.width*0.39, + // y: this.model.point.y+this.model.width*0.052, + x: this.model.width*0.39, + y: this.model.width*0.052, width: this.model.width*0.1, height: this.model.width*0.1/37*74 } @@ -78,10 +94,13 @@ export default class clock extends Group { this.num4 = new Image({ zlevel: this.zlevel, z: this.z, + name: 'group_child', style: { image: this.getImagePic('0'), - x: this.model.point.x+this.model.width*0.52, - y: this.model.point.y+this.model.width*0.052, + // x: this.model.point.x+this.model.width*0.52, + // y: this.model.point.y+this.model.width*0.052, + x: this.model.width*0.52, + y: this.model.width*0.052, width: this.model.width*0.1, height: this.model.width*0.1/37*74 } @@ -89,10 +108,13 @@ export default class clock extends Group { this.num5 = new Image({ zlevel: this.zlevel, z: this.z, + name: 'group_child', style: { image: this.getImagePic('0'), - x: this.model.point.x+this.model.width*0.69, - y: this.model.point.y+this.model.width*0.052, + // x: this.model.point.x+this.model.width*0.69, + // y: this.model.point.y+this.model.width*0.052, + x: this.model.width*0.69, + y: this.model.width*0.052, width: this.model.width*0.1, height: this.model.width*0.1/37*74 } @@ -100,10 +122,13 @@ export default class clock extends Group { this.num6 = new Image({ zlevel: this.zlevel, z: this.z, + name: 'group_child', style: { image: this.getImagePic('0'), - x: this.model.point.x+this.model.width*0.82, - y: this.model.point.y+this.model.width*0.052, + // x: this.model.point.x+this.model.width*0.82, + // y: this.model.point.y+this.model.width*0.052, + x: this.model.width*0.82, + y: this.model.width*0.052, width: this.model.width*0.1, height: this.model.width*0.1/37*74 } @@ -111,10 +136,13 @@ export default class clock extends Group { this.clockColon1 = new Image({ zlevel: this.zlevel, z: this.z, + name: 'group_child', style: { image: clockColon, - x: this.model.point.x+this.model.width*0.16, - y: this.model.point.y-this.model.width*0.028, + // x: this.model.point.x+this.model.width*0.16, + // y: this.model.point.y-this.model.width*0.028, + x: +this.model.width*0.16, + y: -this.model.width*0.028, width: this.model.width*0.37, height: this.model.width/1*0.37 } @@ -122,23 +150,27 @@ export default class clock extends Group { this.clockColon2 = new Image({ zlevel: this.zlevel, z: this.z, + name: 'group_child', style: { image: clockColon, - x: this.model.point.x+this.model.width*0.46, - y: this.model.point.y-this.model.width*0.028, + // x: this.model.point.x+this.model.width*0.46, + // y: this.model.point.y-this.model.width*0.028, + x: +this.model.width*0.46, + y: -this.model.width*0.028, width: this.model.width*0.37, height: this.model.width/1*0.37 } }); - this.add(this.clockBg); - this.add(this.num1); - this.add(this.num2); - this.add(this.num3); - this.add(this.num4); - this.add(this.num5); - this.add(this.num6); - this.add(this.clockColon1); - this.add(this.clockColon2); + this.grouper.add(this.clockBg); + this.grouper.add(this.num1); + this.grouper.add(this.num2); + this.grouper.add(this.num3); + this.grouper.add(this.num4); + this.grouper.add(this.num5); + this.grouper.add(this.num6); + this.grouper.add(this.clockColon1); + this.grouper.add(this.clockColon2); + this.add(this.grouper); } getImagePic(context) { let pic = clock0; @@ -268,8 +300,12 @@ export default class clock extends Group { // debugger; // this.parent.dirty(); // - // this.model.point.x+=dx; - // this.model.point.y+=dy; + this.model.point.x+=dx; + this.model.point.y+=dy; + // this.attr('transform', [1, 0, 0, 1, 0, 0]); + // this.transform = [1, 0, 0, 1, 0, 0]; + // this.invTransform = [1, 0, 0, 1, 0, 0]; + // console.log(this.model, this); // this.eachChild(function(child) { // // // debugger; // child.style.x+=dx;