--

src/themes/light/playground.scss

 .zero-playground-body-center{
   position: relative;
   width: 750px;
-  height: 1206px;
+  height: 1624px;
   margin: 10px auto;
   // max-height: 1200px;
   background-color: transparent;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
-  overflow-x: hidden;
-  overflow-y: auto;
+  //overflow-x: hidden;
+  //overflow-y: auto;
   /*transform: scale(.5, .5);
   transform-origin: 50% 0%;*/
   //zoom: 0.5;

src/views/Editor/Playground.vue

 <template>
 	<pane icon="el-icon-s-open" class="pane-playground" :title="$t('panes.Playground')">
-		<div class="zero-playground-body-center" :style="playgroundStyle">
+		
+		<div class="draw-body">
+			<div class="playground-con">
+				<!-- <label class="el-form-item__label">滑动滚轮进行缩放</label> -->
+				<el-button size="mini" @click="setZoom(true)"><i class="el-icon-plus"></i></el-button>
+				<el-input class="el-input el-input--mini" :value="parseInt(zoom*100)+'%'" style="width:60px" readonly/>
+				<el-button size="mini" @click="setZoom(false)"><i class="el-icon-minus"></i></el-button>
+			</div>
+
+			<div class="zero-playground-body-center" :style="playgroundStyle" >
 			<!-- <div class="zero-playground-draw-panel"> -->
 				<draw-canvas-panel></draw-canvas-panel>
 			<!-- </div> -->
 			</div>
+		</div>
 	</pane>
 </template>
 
@@ -18,21 +28,51 @@ export default {
   name: 'Playground',
   components: { Pane, DrawPanel,DrawCanvasPanel},
   props: {
-    zoom:0.5
+   
   },
-  data:{
   
+  data () {
+    return {
+	   zoom:0.5,
+	   hasCtrlState:false
+    }
 	},
   methods: {
     mouseWheel(e){
 		console.log(e)
+		console.log(this.hasCtrlState)
+		if(!this.hasCtrlState){
+			return;
+		}
 		if(e.deltaY>0){
-			this.zoom-=0.1
+			this.setZoom(false)
 		}else if(e.deltaY<0){
-			this.zoom+=0.1
+			this.setZoom(true)
 		}
 		console.log(this.zoom)
+		// this.$set(this.zoom, this.zoomj)
+	},
+	setZoom(state){
+		if(state){
+			if(this.zoom>=1.4){
+				this.zoom=1.4
+			}else{
+				this.zoom+=0.05
+			}
+		}else{
+			if(this.zoom<=0.2){
+				this.zoom=0.2
+			}else{
+				this.zoom-=0.05
+			}
+		}
+	//	this.zoom=this.zoom.toFixed(2)
 		events.$emit('setPlaygroundZoom', {zoom:this.zoom});
+
+	},
+	keyDo(state){
+		console.log(state)
+		this.hasCtrlState=state;
 	}
   },
   computed: {
@@ -48,13 +88,46 @@ export default {
   created(){
 	  //alert()
 	  this.zoom=0.5;
+	  
 	   document.body.addEventListener('mousewheel',(e)=>{
 		   this.mouseWheel(e)
 	   },false)
 
+	    document.onkeydown = (e)=>{
+            let key = window.event.keyCode;
+            if (key == 18) {
+                this.keyDo(true);
+            }
+		};
+		document.onkeyup = (e)=>{
+            let key = window.event.keyCode;
+            if (key == 18) {
+                this.keyDo(false);
+            }
+        };
+
+	  
+  },
+  mounted(){
+	events.$emit('setPlaygroundZoom', {zoom:this.zoom});
+	console.log(123)
   }
 };
 </script>
 
 <style scoped>
 </style>
+<style lang="scss">
+.pane-playground{
+	
+}
+.draw-body{
+	width:100%;
+	height: 100%;
+	overflow: auto;
+}
+.playground-con{
+	width: 100%;
+	height: 50px;
+}
+</style>
\ No newline at end of file

src/views/Editor/components/editControlView.vue

 
 <template>
   <div class="edit-control-view" @mousedown="moveEdit($event,`mousedown`)">
+    <!-- <div class="edit-box-con-body" :style="boxstyleEdit">
+     
+    </div> -->
+
     <div class="edit-con-body" :style="styleEdit">
       <div class="edit-con-move"  @mousedown="editStateCon(`move`)"></div>
       <div class="edit-con-com edit-left-con"  @mousedown="editStateCon(`left`)"></div>
@@ -20,6 +24,7 @@
       ></div>
     </div>
 
+    
   </div>
 </template>
 
@@ -35,7 +40,11 @@ export default {
     },
     activeComponent: {}
   },
-  data: {
+  data () {
+    return {
+
+       styleCatch:{},
+       boxStyleCatch:{},
        canMove: false,
         editEvent: "",
         changeWidth: 0,
@@ -50,7 +59,10 @@ export default {
         catchHeight: 0,
         catchX:0,
         catchY:0,
+        zoom:2
+    }
 	},
+ 
   components: {},
   methods: {
     moveEdit(e, type) {
@@ -91,152 +103,182 @@ export default {
           this.catchHeight=0;
           this.catchY=0;
           this.catchY=0;
+
+          //this.styleCatch=this.activeComponent.properties;
+        //  this.boxStyleCatch=this.activeComponent.properties;
         }
       }
     },
     catchWidthCon() {
       if (this.editEvent == "bottomright") {
-        this.catchWidth = this.activeComponent.properties.width;
-        this.catchHeight = this.activeComponent.properties.height;
+        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:0;
+        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:0;
       }else if (this.editEvent == "topright") {
-        this.catchWidth = this.activeComponent.properties.width;
-        this.catchHeight = this.activeComponent.properties.height;
-        this.catchY = this.activeComponent.properties.y;
+        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:0;
+        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:0;
+        this.catchY =  this.styleCatch.y? this.styleCatch.y:0;
       }else if (this.editEvent == "top") {
-        this.catchHeight = this.activeComponent.properties.height;
-        this.catchY = this.activeComponent.properties.y;
+        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:0;
+        this.catchY =  this.styleCatch.y? this.styleCatch.y:0;
       }else if (this.editEvent == "right") {
-        this.catchWidth = this.activeComponent.properties.width;
-        this.catchY = this.activeComponent.properties.y;
+        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:0;
+        this.catchY =  this.styleCatch.y? this.styleCatch.y:0;
       } else if (this.editEvent == "left") {
-        this.catchWidth = this.activeComponent.properties.width;
-        this.catchX = this.activeComponent.properties.x;
+        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:0;
+        this.catchX =  this.styleCatch.x? this.styleCatch.x:0;
       } else if (this.editEvent == "bottom") {
-        this.catchHeight = this.activeComponent.properties.height;
+        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:0;
       } else if (this.editEvent == "topleft") {
-        this.catchWidth = this.activeComponent.properties.width;
-        this.catchHeight = this.activeComponent.properties.height;
-        this.catchY = this.activeComponent.properties.y;
-        this.catchX = this.activeComponent.properties.x;
+        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:0;
+        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:0;
+        this.catchY =  this.styleCatch.y? this.styleCatch.y:0;
+        this.catchX =  this.styleCatch.x? this.styleCatch.x:0;
       } else if (this.editEvent == "bottomleft") {
-        this.catchWidth = this.activeComponent.properties.width;
-        this.catchHeight = this.activeComponent.properties.height;
-        this.catchX = this.activeComponent.properties.x;
+        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:0;
+        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:0;
+        this.catchX =  this.styleCatch.x? this.styleCatch.x:0;
       } else if (this.editEvent == "center") {
-        this.catchWidth = this.activeComponent.properties.anchorX;
-        this.catchHeight = this.activeComponent.properties.anchorY;
+        this.catchWidth =  this.styleCatch.anchorX? this.styleCatch.anchorX:0;
+        this.catchHeight =  this.styleCatch.anchorY? this.styleCatch.anchorY:0;
       } else if (this.editEvent == "move") {
-        this.catchX = this.activeComponent.properties.x;
-        this.catchY = this.activeComponent.properties.y;
+        this.catchX =  this.styleCatch.x? this.styleCatch.x:0;
+        this.catchY =  this.styleCatch.y? this.styleCatch.y:0;
       }
     },
     modifyCopyPropertiesCon() {
       if (this.editEvent == "bottomright") {
-        this.$store.dispatch("modifyCopyProperties", {
-          width: this.catchWidth + this.changeMoveX * 2,
-          height: this.catchHeight + this.changeMoveY * 2
-        });
+        // this.$store.dispatch("modifyCopyProperties", {
+        //   width: this.catchWidth + this.changeMoveX * this.zoom,
+        //   height: this.catchHeight + this.changeMoveY * this.zoom
+        // });
+       
+        this.boxStyleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
+        this.boxStyleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
       } else if (this.editEvent == "top") {
-        this.$store.dispatch("modifyCopyProperties", {
-          height: this.catchHeight - this.changeMoveY * 2,
-          y:this.catchY+this.changeMoveY * 2
-        });
+        
+        // this.$store.dispatch("modifyCopyProperties", {
+        //   height: this.catchHeight - this.changeMoveY * this.zoom,
+        //   y:this.catchY+this.changeMoveY * this.zoom
+        // });
+        this.boxStyleCatch.height=this.catchHeight - this.changeMoveY * this.zoom;
+        this.boxStyleCatch.y=this.catchY+this.changeMoveY * this.zoom
       } else if (this.editEvent == "right") {
-        this.$store.dispatch("modifyCopyProperties", {
-          width: this.catchWidth + this.changeMoveX * 2,
-        });
+        // this.$store.dispatch("modifyCopyProperties", {
+        //   width: this.catchWidth + this.changeMoveX * this.zoom,
+        // });
+         this.boxStyleCatch.width=this.catchWidth + this.changeMoveX * this.zoom;
       } else if (this.editEvent == "left") {
-        this.$store.dispatch("modifyCopyProperties", {
-          width: this.catchWidth - this.changeMoveX * 2,
-          x:this.catchX+this.changeMoveX * 2
-        });
+        // this.$store.dispatch("modifyCopyProperties", {
+        //   width: this.catchWidth - this.changeMoveX * this.zoom,
+        //   x:this.catchX+this.changeMoveX * this.zoom
+        // });
+        this.boxStyleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
+        this.boxStyleCatch.x=this.catchX+this.changeMoveX * this.zoom
       } else if (this.editEvent == "bottom") {
-        this.$store.dispatch("modifyCopyProperties", {
-          height: this.catchHeight + this.changeMoveY * 2,
-        });
+        // this.$store.dispatch("modifyCopyProperties", {
+        //   height: this.catchHeight + this.changeMoveY * this.zoom,
+        // });
+
+        this.boxStyleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
       } else if (this.editEvent == "topright") {
-        this.$store.dispatch("modifyCopyProperties", {
-          width: this.catchWidth + this.changeMoveX * 2,
-          height: this.catchHeight - this.changeMoveY * 2,
-          y:this.catchY+this.changeMoveY * 2
-        });
+        // this.$store.dispatch("modifyCopyProperties", {
+        //   width: this.catchWidth + this.changeMoveX * this.zoom,
+        //   height: this.catchHeight - this.changeMoveY * this.zoom,
+        //   y:this.catchY+this.changeMoveY * this.zoom
+        // });
+        this.boxStyleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
+        this.boxStyleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
+        this.boxStyleCatch.y=this.catchY+this.changeMoveY * this.zoom
+
       } else if (this.editEvent == "topleft") {
-        this.$store.dispatch("modifyCopyProperties", {
-          width: this.catchWidth - this.changeMoveX * 2,
-          height: this.catchHeight - this.changeMoveY * 2,
-          y:this.catchY+this.changeMoveY * 2,
-          x:this.catchX+this.changeMoveX * 2
-        });
+        // this.$store.dispatch("modifyCopyProperties", {
+        //   width: this.catchWidth - this.changeMoveX * this.zoom,
+        //   height: this.catchHeight - this.changeMoveY * this.zoom,
+        //   y:this.catchY+this.changeMoveY * this.zoom,
+        //   x:this.catchX+this.changeMoveX * this.zoom
+        // });
+        this.boxStyleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
+        this.boxStyleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
+        this.boxStyleCatch.y=this.catchY+this.changeMoveY * this.zoom
+        this.boxStyleCatch.x=this.catchX+this.changeMoveX * this.zoom
+
       } else if (this.editEvent == "bottomleft") {
-        this.$store.dispatch("modifyCopyProperties", {
-          width: this.catchWidth - this.changeMoveX * 2,
-          height: this.catchHeight + this.changeMoveY * 2,
-          x:this.catchX+this.changeMoveX * 2
-        });
+        // this.$store.dispatch("modifyCopyProperties", {
+        //   width: this.catchWidth - this.changeMoveX * this.zoom,
+        //   height: this.catchHeight + this.changeMoveY * this.zoom,
+        //   x:this.catchX+this.changeMoveX * this.zoom
+        // });
+          this.boxStyleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
+          this.boxStyleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
+          this.boxStyleCatch.x=this.catchX+this.changeMoveX * this.zoom
       } else if (this.editEvent == "center") {
-        this.$store.dispatch("modifyCopyProperties", {
-          anchorX: this.catchWidth + this.changeMoveX * 2,
-          anchorY: this.catchHeight + this.changeMoveY * 2
-        });
+        // this.$store.dispatch("modifyCopyProperties", {
+        //   anchorX: this.catchWidth + this.changeMoveX * this.zoom,
+        //   anchorY: this.catchHeight + this.changeMoveY * this.zoom
+        // });
+        this.boxStyleCatch.anchorX=this.catchWidth + this.changeMoveX * this.zoom
+        this.boxStyleCatch.anchorY=this.catchHeight + this.changeMoveY * this.zoom
       } else if (this.editEvent == "move") {
-        this.$store.dispatch("modifyCopyProperties", {
-          y:this.catchY+this.changeMoveY * 2,
-          x:this.catchX+this.changeMoveX * 2
-        });
+        // this.$store.dispatch("modifyCopyProperties", {
+        //   y:this.catchY+this.changeMoveY * this.zoom,
+        //   x:this.catchX+this.changeMoveX * this.zoom
+        // });
+          this.boxStyleCatch.y=this.catchY+this.changeMoveY * this.zoom
+          this.boxStyleCatch.x=this.catchX+this.changeMoveX * this.zoom
       }
     },
     modifyPropertiesCon() {
       if (this.editEvent == "bottomright") {
         this.$store.dispatch("modifyProperties", {
-          width: this.catchWidth + this.changeMoveX * 2,
-          height: this.catchHeight + this.changeMoveY * 2
+          width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
+          height: parseInt(this.catchHeight + this.changeMoveY * this.zoom)
         });
       }else if (this.editEvent == "top") {
         this.$store.dispatch("modifyProperties", {
-          height: this.catchHeight - this.changeMoveY * 2,
-          y:this.catchY+this.changeMoveY * 2
+          height: parseInt(this.catchHeight - this.changeMoveY * this.zoom),
+          y:parseInt(this.catchY+this.changeMoveY * this.zoom)
         });
       } else if (this.editEvent == "right") {
         this.$store.dispatch("modifyProperties", {
-          width: this.catchWidth + this.changeMoveX * 2,
+          width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
         });
       } else if (this.editEvent == "left") {
         this.$store.dispatch("modifyProperties", {
-          width: this.catchWidth - this.changeMoveX * 2,
-          x:this.catchX+this.changeMoveX * 2
+          width: parseInt(this.catchWidth - this.changeMoveX * this.zoom),
+          x:parseInt(this.catchX+this.changeMoveX * this.zoom)
         });
       } else if (this.editEvent == "bottom") {
         this.$store.dispatch("modifyProperties", {
-          height: this.catchHeight + this.changeMoveY * 2,
+          height: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
         });
       } else if (this.editEvent == "topright") {
         this.$store.dispatch("modifyProperties", {
-          width: this.catchWidth + this.changeMoveX * 2,
-          height: this.catchHeight - this.changeMoveY * 2,
-          y:this.catchY+this.changeMoveY * 2
+          width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
+          height: parseInt(this.catchHeight - this.changeMoveY * this.zoom),
+          y:parseInt(this.catchY+this.changeMoveY * this.zoom)
         });
       }else if (this.editEvent == "topleft") {
         this.$store.dispatch("modifyProperties", {
-          width: this.catchWidth - this.changeMoveX * 2,
-          height: this.catchHeight - this.changeMoveY * 2,
-          y:this.catchY+this.changeMoveY * 2,
-          x:this.catchX+this.changeMoveX * 2
+          width: parseInt(this.catchWidth - this.changeMoveX * this.zoom),
+          height: parseInt(this.catchHeight - this.changeMoveY * this.zoom),
+          y:parseInt(this.catchY+this.changeMoveY * this.zoom),
+          x:parseInt(this.catchX+this.changeMoveX * this.zoom)
         });
       } else if (this.editEvent == "bottomleft") {
         this.$store.dispatch("modifyProperties", {
-          width: this.catchWidth - this.changeMoveX * 2,
-          height: this.catchHeight + this.changeMoveY * 2,
-          x:this.catchX+this.changeMoveX * 2
+          width: parseInt(this.catchWidth - this.changeMoveX * this.zoom),
+          height: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
+          x:parseInt(this.catchX+this.changeMoveX * this.zoom)
         });
       } else if (this.editEvent == "center") {
         this.$store.dispatch("modifyProperties", {
-          anchorX: this.catchWidth + this.changeMoveX * 2,
-          anchorY: this.catchHeight + this.changeMoveY * 2
+          anchorX: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
+          anchorY: parseInt(this.catchHeight + this.changeMoveY * this.zoom)
         });
       } else if (this.editEvent == "move") {
         this.$store.dispatch("modifyProperties", {
-          y:this.catchY+this.changeMoveY * 2,
-          x:this.catchX+this.changeMoveX * 2
+          y:parseInt(this.catchY+this.changeMoveY * this.zoom),
+          x:parseInt(this.catchX+this.changeMoveX * this.zoom)
         });
       }
     },
@@ -248,36 +290,67 @@ export default {
     events.$on("setMoveEdit", data => {
       this.moveEdit(data.e, data.type);
     });
+    events.$on("setPlaygroundZoom", data => {
+    //  this.moveEdit(data.e, data.type);
+        console.log("data.zoom",data.zoom)
+        this.zoom=1/data.zoom;
+    });
+   // events.$emit('setPlaygroundZoom', {zoom:this.zoom});
+
     document.body.addEventListener("mouseup",(e)=>{
       this.moveEdit(e,`mouseup`)
     })
     document.body.addEventListener("mousemove",(e)=>{
       this.moveEdit(e,`mousemove`)
     })
+
+    this.styleCatch=this.activeComponent.properties;
+    this.boxStyleCatch=this.activeComponent.properties;
   },
   computed: {
     position() {
       let result = {};
-      result.x = this.activeComponent.properties.x;
-      result.y = this.activeComponent.properties.y;
+      result.x =  this.styleCatch.x;
+      result.y =  this.styleCatch.y;
       return result;
     },
     styleEdit() {
       if (!this.activeComponent) {
         return {};
       }
-      console.log(this.activeComponent.properties);
+      console.log( this.styleCatch);
+      
 
       let result={
-         width: `${this.activeComponent.properties.width}px`,
-        height: `${this.activeComponent.properties.height}px`,
-        marginTop: `${this.activeComponent.properties.y}px`,
-        marginLeft: `${this.activeComponent.properties.x}px`,
-        transform: `rotate(${this.activeComponent.properties.rotation?this.activeComponent.properties.rotation:0}deg) 
-        scaleX(${this.activeComponent.properties.scaleX?this.activeComponent.properties.scaleX:1})
-        scaleY(${this.activeComponent.properties.scaleY?this.activeComponent.properties.scaleY:1})`,
-        webkitTransformOriginY: `${this.activeComponent.properties.anchorY}px`,
-        webkitTransformOriginX: `${this.activeComponent.properties.anchorX}px`,
+         width: `${ this.styleCatch.width}px`,
+        height: `${ this.styleCatch.height}px`,
+        marginTop: `${ this.styleCatch.y}px`,
+        marginLeft: `${ this.styleCatch.x}px`,
+        transform: `rotate(${ this.styleCatch.rotation? this.styleCatch.rotation:0}deg) 
+        scaleX(${ this.styleCatch.scaleX? this.styleCatch.scaleX:1})
+        scaleY(${ this.styleCatch.scaleY? this.styleCatch.scaleY:1})`,
+        webkitTransformOriginY: `${ this.styleCatch.anchorY}px`,
+        webkitTransformOriginX: `${ this.styleCatch.anchorX}px`,
+      }
+      
+      return result
+    },
+    boxstyleEdit(){
+       if (!this.activeComponent) {
+        return {};
+      }
+      console.log( this.boxStyleCatch);
+      
+      let result={
+         width: `${ this.boxStyleCatch.width}px`,
+        height: `${ this.boxStyleCatch.height}px`,
+        marginTop: `${ this.boxStyleCatch.y}px`,
+        marginLeft: `${ this.boxStyleCatch.x}px`,
+        transform: `rotate(${ this.boxStyleCatch.rotation? this.boxStyleCatch.rotation:0}deg) 
+        scaleX(${ this.boxStyleCatch.scaleX? this.boxStyleCatch.scaleX:1})
+        scaleY(${ this.boxStyleCatch.scaleY? this.boxStyleCatch.scaleY:1})`,
+        webkitTransformOriginY: `${ this.boxStyleCatch.anchorY}px`,
+        webkitTransformOriginX: `${ this.boxStyleCatch.anchorX}px`,
       }
       
       return result
@@ -290,20 +363,20 @@ export default {
         top: 0,
         left: 0
       };
-      if (this.activeComponent.properties.anchorX) {
-        result.left = `${(this.activeComponent.properties.anchorX /
-          this.activeComponent.properties.width) *
+      if ( this.styleCatch.anchorX) {
+        result.left = `${( this.styleCatch.anchorX /
+           this.styleCatch.width) *
           100}%`;
       } else {
-        this.activeComponent.properties.anchorX = 0;
+         this.styleCatch.anchorX = 0;
       }
 
-      if (this.activeComponent.properties.anchorY) {
-        result.top = `${(this.activeComponent.properties.anchorY /
-          this.activeComponent.properties.height) *
+      if ( this.styleCatch.anchorY) {
+        result.top = `${( this.styleCatch.anchorY /
+           this.styleCatch.height) *
           100}%`;
       } else {
-        this.activeComponent.properties.anchorY = 0;
+         this.styleCatch.anchorY = 0;
       }
       return result;
     }
@@ -329,6 +402,12 @@ export default {
   height: 100%;
   user-select: none;
 }
+.edit-box-con-body{
+   box-sizing: border-box;
+  cursor: move;
+  border: 3px solid #ccc;
+  position: absolute;
+}
 .edit-con-body {
   box-sizing: border-box;
   cursor: move;