Skip to content

Z
zeroing-editor
Commit d9bba829 authored by 任建锋's avatar 任建锋
Browse files
Options

--

parent 7b484780
Show whitespace changes
Inline Side-by-side
Showing with 712 additions and 145 deletions
public/index.html
View file @ d9bba829
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<title>烽火台</title> <title>烽火台</title>
<script src="//yun.duiba.com.cn/js-libs/psd.js/3.2.0/psd.min.js"></script> <script src="//yun.duiba.com.cn/js-libs/psd.js/3.2.0/psd.min.js"></script>
<script src="//yun.duiba.com.cn/editor/zeroing/libs/engine.a0a1c11664d9ed4ac76999a01ceb9a729e1b27c1.js"></script> <script src="//yun.duiba.com.cn/editor/zeroing/libs/engine.c70c23ccac5955f9f2cd400fda1e6bba2fb413a3.js"></script>
</head> </head>
<body> <body>
......
src/store/modules/project.js
View file @ d9bba829
...@@ -771,7 +771,7 @@ export const projectStore = { ...@@ -771,7 +771,7 @@ export const projectStore = {
// debugger; // debugger;
let getTopView = node => { let getTopView = node => {
console.log("node",node) // console.log("node",node)
if (node.parent && !node.parent.parent) { if (node.parent && !node.parent.parent) {
return node; return node;
} else { } else {
...@@ -816,12 +816,13 @@ export const projectStore = { ...@@ -816,12 +816,13 @@ export const projectStore = {
_props[key] = value; _props[key] = value;
}); });
console.log("props",props,state.activeComponent) console.log("props",commit,state,props,state.activeComponent)
// if(nodeUUidCatch==state.activeComponent.uuid){ if(nodeUUidCatch==state.activeComponent.uuid){
events.$emit('canvasKeyVupdate', {props,activeComponent:state.activeComponent}); events.$emit('canvasKeyVupdate', {props},"update");
// } }
nodeUUidCatch=state.activeComponent.uuid nodeUUidCatch=state.activeComponent.uuid
console.log("nodeUUidCatch",nodeUUidCatch) console.log("nodeUUidCatch",nodeUUidCatch)
/*if (hasAssetsDep) { /*if (hasAssetsDep) {
commit('updateAssetDep'); commit('updateAssetDep');
}*/ }*/
......
src/views/Editor/Views.vue
View file @ d9bba829
...@@ -131,6 +131,18 @@ ...@@ -131,6 +131,18 @@
let data=this.$refs.tree.getCurrentNode() let data=this.$refs.tree.getCurrentNode()
let nodeDom=this.$refs.tree.getNode(data) let nodeDom=this.$refs.tree.getNode(data)
this.$store.dispatch('activeComponent', {data, node:nodeDom}); this.$store.dispatch('activeComponent', {data, node:nodeDom});
let styleCatch={
x:parseInt(node.x),
y:parseInt(node.y),
anchorX:parseInt(node.anchorX),
anchorY:parseInt(node.anchorY),
imageWidth:parseInt(node.imageWidth),
imageHeight:parseInt(node.imageHeight),
width:parseInt(node.width),
height:parseInt(node.height),
}
this.$store.dispatch("modifyProperties", styleCatch);
} }
}, },
updateFilter() { updateFilter() {
......
src/views/Editor/components/RuntimeLayer.vue
View file @ d9bba829
...@@ -81,8 +81,8 @@ ...@@ -81,8 +81,8 @@
modifyProps(nodePath, props, callback) { modifyProps(nodePath, props, callback) {
let result = engine.editorStage.modifyProps(nodePath, props); let result = engine.editorStage.modifyProps(nodePath, props);
if (result) { if (result) {
//callback() callback()
setTimeout(callback, 100); //setTimeout(callback, 0);
} }
return result; return result;
}, },
......
src/views/Editor/components/drawCanvasPanel.vue
View file @ d9bba829
...@@ -78,31 +78,24 @@ ...@@ -78,31 +78,24 @@
console.log(url) console.log(url)
return url return url
}, },
getNode() { getNode(type) {
if(type=="end"){
this.targetNode = this.$refs.runtimeLayer.getNode(this.nodePath); this.targetNode = this.$refs.runtimeLayer.getNode(this.nodePath);
console.log(this.targetNode.name,this.targetNode) console.log("this.targetNode",this.targetNode)
events.$emit('locate-view-node-active', this.targetNode); events.$emit('locate-view-node-active', this.targetNode);
}else if(type=="update"){
this.targetNode = this.$refs.runtimeLayer.getNode(this.nodePath);
}
}, },
onModifyProp(key,value,data) { onModifyProp(key,value,type) {
let activeComponent=data.activeComponent
console.log("activeComponent",activeComponent)
// if(activeComponent){
// return false;
// }
// if(activeComponent.uuid==this.targetNode.uuid){
console.log("修改 key v") console.log("修改 key v")
if(this.$refs.runtimeLayer){ if(this.$refs.runtimeLayer){
this.$refs.runtimeLayer.modifyProps(this.nodePath, { this.$refs.runtimeLayer.modifyProps(this.nodePath, {
[key]: value, [key]: value,
}, () => { }, () => {
this.getNode(); this.getNode(type);
}) })
} }
// }
// console.log(data.activeComponent.name,this.targetNode.name,this.nodePath)
}, },
onClickTouchLayer(e){ onClickTouchLayer(e){
const {x,y} = e; const {x,y} = e;
...@@ -110,19 +103,22 @@ ...@@ -110,19 +103,22 @@
return false; return false;
} }
console.log("sdsd",x/this.zoom,y/this.zoom) console.log("sdsd",x/this.zoom,y/this.zoom)
setTimeout(()=>{ // setTimeout(()=>{
if(this.$refs.runtimeLayer){ if(this.$refs.runtimeLayer){
this.nodePath = this.$refs.runtimeLayer.getNodePathWithPos({x:x/this.zoom, y:y/this.zoom}); this.nodePath = this.$refs.runtimeLayer.getNodePathWithPos({x:x/this.zoom, y:y/this.zoom});
} }
},100) // },100)
console.log(this.nodePath) console.log(this.nodePath)
}, },
canvasKeyVupdate(data){ canvasKeyVupdate(data,type){
console.log(10,data) console.log(10,data)
let _data=data; let _data=data;
for(let item in _data.props){ for(let item in _data.props){
console.log(item) console.log(item)
this.onModifyProp(item, _data.props[item],_data) if(_data.props.hasOwnProperty(item)){
console.log(_data.props[item])
this.onModifyProp(item, _data.props[item],type)
}
} }
}, },
canvasViewUpdate(){ canvasViewUpdate(){
...@@ -131,7 +127,7 @@ ...@@ -131,7 +127,7 @@
} }
,canvasActiveNodeByTree(nodePath){ ,canvasActiveNodeByTree(nodePath){
this.nodePath=nodePath this.nodePath=nodePath
this.getNode() this.getNode("end")
} }
}, },
computed: { computed: {
...@@ -159,7 +155,7 @@ ...@@ -159,7 +155,7 @@
}, },
watch: { watch: {
nodePath() { nodePath() {
this.getNode(); this.getNode("end");
}, },
views() { views() {
this.$refs.runtimeLayer.showView(this.views[0]); this.$refs.runtimeLayer.showView(this.views[0]);
......
src/views/Editor/components/editControlView copy 2.vue 0 → 100644
View file @ d9bba829
<template>
<div class="edit-control-view" @mousedown="moveEdit($event,`mousedown`)" ref="zeroPlayground" @click="onClickTouchLayer">
<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>
<div class="edit-con-com edit-right-con" @mousedown="editStateCon(`right`)"></div>
<div class="edit-con-com edit-top-con" @mousedown="editStateCon(`top`)"></div>
<div class="edit-con-com edit-bottom-con" @mousedown="editStateCon(`bottom`)"></div>
<div class="edit-con-com edit-topleft-con" @mousedown="editStateCon(`topleft`)"></div>
<div class="edit-con-com edit-topright-con" @mousedown="editStateCon(`topright`)"></div>
<div class="edit-con-com edit-bottomleft-con" @mousedown="editStateCon(`bottomleft`)"></div>
<div class="edit-con-com edit-bottomright-con" @mousedown="editStateCon(`bottomright`)"></div>
<div
class="edit-con-com edit-center-con"
:style="styleEditAnchor"
@mousedown="editStateCon(`center`)"
></div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import events from "@/global-events.js";
export default {
props: {
targetNode: {},
},
data () {
return {
styleCatch:{},
boxStyleCatch:{},
canMove: false,
canFouce: true,
editEvent: "",
changeWidth: 0,
changeWidthStart: 0,
changeHeight: 0,
changeHeightStart: 0,
changeMoveX: 0,
changeMoveY: 0,
changeMoveOffsetX: 0,
changeMoveOffsetY: 0,
changeMoveOffsetX1: 0,
changeMoveOffsetY1: 0,
changeMoveOffsetX2: 0,
changeMoveOffsetY2: 0,
changeEndX: 0,
changeEndY: 0,
catchWidth: 0,
catchHeight: 0,
catchX:0,
catchY:0,
zoom:2
}
},
components: {},
methods: {
onClickTouchLayer(e) {
if(!this.canFouce){
return false;
}
events.$emit("onClickTouchLayer",{
x:e.pageX-this.$refs.zeroPlayground.getBoundingClientRect().left/2,
y:e.pageY-this.$refs.zeroPlayground.getBoundingClientRect().top/2
});
},
moveEdit(e, type) {
if (!this) {
return;
}
if (this.editEvent != "") {
if (type == "mousedown") {
this.canMove = true;
this.canFouce=false
this.changeWidthStart = e.x;
this.changeHeightStart = e.y;
this.changeMoveOffsetX2=e.x;
this.changeMoveOffsetY2=e.y;
this.catchWidthCon();
}
if (type == "mousemove") {
if (!this.canMove) {
return;
}
this.changeMoveX = e.x - this.changeWidthStart;
this.changeMoveY = e.y - this.changeHeightStart;
// this.changeMoveOffsetX=e.offsetX
// this.changeMoveOffsetY=e.offsetY
this.changeMoveOffsetX1=e.x;
this.changeMoveOffsetY1=e.y;
this.changeMoveOffsetX=this.changeMoveOffsetX1-this.changeMoveOffsetX2
this.changeMoveOffsetY=this.changeMoveOffsetY1-this.changeMoveOffsetY2
console.log( "this.changeMoveOffsetX",)
this.changeMoveOffsetX2=e.x;
this.changeMoveOffsetY2=e.y;
console.log(this.changeMoveOffsetX)
this.modifyCopyPropertiesCon();
}
if (type == "mouseup") {
this.canMove = false;
// setTimeout(()=>{
this.canFouce=true
// },500)
this.changeEndX = e.x;
this.changeEndY = e.y;
this.modifyPropertiesCon();
this.editEvent = "";
this.changeWidth=0;
this.changeWidthStart=0;
this.changeHeight=0;
this.changeHeightStart=0;
this.changeMoveX=0;
this.changeMoveY=0;
this.changeEndX=0;
this.changeEndY=0;
this.catchWidth=0;
this.catchHeight=0;
this.catchY=0;
this.catchY=0;
this.changeMoveOffsetX=0
this.changeMoveOffsetY=0
}
}
},
catchWidthCon() {
this.catchY = this.styleCatch.y? this.styleCatch.y:0;
this.catchX = this.styleCatch.x? this.styleCatch.x:0;
if (this.editEvent == "bottomright") {
this.catchWidth = this.styleCatch.imageWidth? this.styleCatch.imageWidth:(this.styleCatch.width?this.styleCatch.width:0);
this.catchHeight = this.styleCatch.imageHeight? this.styleCatch.imageHeight:(this.styleCatch.height?this.styleCatch.height:0);
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth),
height: parseInt(this.catchHeight),
});
}else if (this.editEvent == "topright") {
this.catchWidth = this.styleCatch.imageWidth? this.styleCatch.imageWidth:(this.styleCatch.width?this.styleCatch.width:0);
this.catchHeight = this.styleCatch.imageHeight? this.styleCatch.imageHeight:(this.styleCatch.height?this.styleCatch.height:0);
}else if (this.editEvent == "top") {
this.catchHeight = this.styleCatch.imageHeight? this.styleCatch.imageHeight:(this.styleCatch.height?this.styleCatch.height:0);
}else if (this.editEvent == "right") {
this.catchWidth = this.styleCatch.imageWidth? this.styleCatch.imageWidth:(this.styleCatch.width?this.styleCatch.width:0);
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth),
});
} else if (this.editEvent == "left") {
this.catchWidth = this.styleCatch.imageWidth? this.styleCatch.imageWidth:(this.styleCatch.width?this.styleCatch.width:0);
} else if (this.editEvent == "bottom") {
this.catchHeight = this.styleCatch.imageHeight? this.styleCatch.imageHeight:(this.styleCatch.height?this.styleCatch.height:0);
this.$store.dispatch("modifyProperties", {
height: parseInt(this.catchHeight),
});
} else if (this.editEvent == "topleft") {
this.catchWidth = this.styleCatch.imageWidth? this.styleCatch.imageWidth:(this.styleCatch.width?this.styleCatch.width:0);
this.catchHeight = this.styleCatch.imageHeight? this.styleCatch.imageHeight:(this.styleCatch.height?this.styleCatch.height:0);
} else if (this.editEvent == "bottomleft") {
this.catchWidth = this.styleCatch.imageWidth? this.styleCatch.imageWidth:(this.styleCatch.width?this.styleCatch.width:0);
this.catchHeight = this.styleCatch.imageHeight? this.styleCatch.imageHeight:(this.styleCatch.height?this.styleCatch.height:0);
} else if (this.editEvent == "center") {
this.catchWidth = this.styleCatch.anchorX? this.styleCatch.anchorX:0;
this.catchHeight = this.styleCatch.anchorY? this.styleCatch.anchorY:0;
} else if (this.editEvent == "move") {
}
},
modifyCopyPropertiesCon() {
if (this.editEvent == "bottomright") {
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
this.styleCatch.y=this.catchY
this.styleCatch.x=this.catchX
console.log(this.styleCatch.width)
} else if (this.editEvent == "top") {
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom;
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
} else if (this.editEvent == "right") {
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom;
} else if (this.editEvent == "left") {
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "bottom") {
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
} else if (this.editEvent == "topright") {
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
} else if (this.editEvent == "topleft") {
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "bottomleft") {
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "center") {
this.styleCatch.anchorX=this.catchWidth + this.changeMoveX * this.zoom
this.styleCatch.anchorY=this.catchHeight + this.changeMoveY * this.zoom
} else if (this.editEvent == "move") {
console.log("this.catchY",this.catchY,this.changeMoveY)
// this.styleCatch.worldMatrix.ty=this.catchY+this.changeMoveY * this.zoom
// this.styleCatch.worldMatrix.tx=this.catchX+this.changeMoveX * this.zoom
events.$emit('canvasKeyVupdate', {props:{
offset_x:this.changeMoveOffsetX * this.zoom,
offset_y:this.changeMoveOffsetY * this.zoom,
}});
console.log("this.styleCatch",this.styleCatch.x,this.styleCatch.y)
}
},
modifyPropertiesCon() {
if (this.editEvent == "bottomright") {
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
height: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
y:parseInt(this.catchY),
x:parseInt(this.catchX)
});
}else if (this.editEvent == "top") {
this.$store.dispatch("modifyProperties", {
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: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
});
} else if (this.editEvent == "left") {
this.$store.dispatch("modifyProperties", {
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: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
});
} else if (this.editEvent == "topright") {
this.$store.dispatch("modifyProperties", {
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: 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: 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: 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:parseInt(this.catchY+this.changeMoveY * this.zoom),
// x:parseInt(this.catchX+this.changeMoveX * this.zoom)
// });
}
},
editStateCon(state) {
this.editEvent = state;
}
},
created() {
events.$on("setMoveEdit", data => {
this.moveEdit(data.e, data.type);
});
events.$on("setPlaygroundZoom", data => {
this.zoom=1/data.zoom;
});
document.body.addEventListener("mouseup",(e)=>{
this.moveEdit(e,`mouseup`)
})
document.body.addEventListener("mousemove",(e)=>{
this.moveEdit(e,`mousemove`)
})
//this.styleCatch=JSON.parse(JSON.stringify(this.targetNode));
this.styleCatch={
x:this.targetNode.x,
y:this.targetNode.y,
imageWidth:this.targetNode.imageWidth,
imageHeight:this.targetNode.imageHeight,
worldMatrix:this.targetNode.worldMatrix,
width:this.targetNode.width,
height:this.targetNode.height,
left:this.targetNode.left,
top:this.targetNode.top,
right:this.targetNode.right,
bottom:this.targetNode.bottom,
horizonCenter:this.targetNode.horizonCenter,
verticalCenter:this.targetNode.verticalCenter,
source:this.targetNode.source,
}
},
computed: {
position() {
console.log("位置更新")
let result = {};
result.x = this.styleCatch.x;
result.y = this.styleCatch.y;
return result;
},
styleEdit() {
if (!this.targetNode) {
return {};
}
console.log("位置更新2")
console.log(this.styleCatch)
let result={
width: `${ this.styleCatch.imageWidth?this.styleCatch.imageWidth:(this.styleCatch.width?this.styleCatch.width:0)}px`,
height: `${ this.styleCatch.imageHeight?this.styleCatch.imageHeight:(this.styleCatch.height?this.styleCatch.height:0)}px`,
// marginTop: `${ this.styleCatch.worldMatrix.ty?this.styleCatch.worldMatrix.ty:0}px`,
// marginLeft: `${ this.styleCatch.worldMatrix.tx?this.styleCatch.worldMatrix.tx:0}px`,
transform: `rotate(${ this.styleCatch.rotation? this.styleCatch.rotation:0}deg)`,
// webkitTransformOriginY: `${ this.styleCatch.anchorY?this.styleCatch.anchorY:0}px`,
// webkitTransformOriginX: `${ this.styleCatch.anchorX?this.styleCatch.anchorX:0}px`,
transform: `matrix(${this.styleCatch.worldMatrix.a},${this.styleCatch.worldMatrix.b},${this.styleCatch.worldMatrix.c},${this.styleCatch.worldMatrix.d},${this.styleCatch.worldMatrix.tx},${this.styleCatch.worldMatrix.ty})`
}
return result
},
styleEditAnchor() {
if (!this.targetNode) {
return {};
}
let result = {
top: 0,
left: 0
};
if ( this.styleCatch.anchorX) {
result.left = `${( this.styleCatch.anchorX /
(this.styleCatch.width?this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0))) *
100}%`;
} else {
this.styleCatch.anchorX = 0;
}
if ( this.styleCatch.anchorY) {
result.top = `${( this.styleCatch.anchorY /
(this.styleCatch.height?this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0))) *
100}%`;
} else {
this.styleCatch.anchorY = 0;
}
return result;
}
},
watch: {
views: function(newVal) {
console.log(newVal);
},
"activeComponent.properties":{
handler (newVal) {
console.error("样式改变")
//this.styleCatch=JSON.parse(JSON.stringify(this.activeComponent.properties));
},
deep: true
},
targetNode:function(){
console.log("now view data",this.targetNode)
let {
x,
y,
width,
height,
imageWidth,
imageHeight,
left,
top,
right,
worldMatrix,
bottom,
horizonCenter,
verticalCenter,
source,
}=this.targetNode
// let x=this.targetNode.worldMatrix.tx;
// let y=this.targetNode.worldMatrix.ty;
this.styleCatch={
x,
y,
worldMatrix,
width,
height,
imageWidth,
imageHeight,
left,
top,
right,
bottom,
horizonCenter,
verticalCenter,
source,
}
// this.styleCatch=JSON.parse(JSON.stringify(this.targetNode));
}
}
};
</script>
<style lang="scss">
.edit-control-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
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;
border: 1px solid #ccc;
position: absolute;
.edit-con-move{
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
// background: blue;
}
.edit-con-com {
box-sizing: border-box;
border: 1px solid #444;
position: absolute;
width: 14px;
height: 14px;
margin: -7px -7px;
}
.edit-left-con {
left: 0;
top: 50%;
cursor: w-resize;
}
.edit-right-con {
right: 0;
top: 50%;
cursor: e-resize;
}
.edit-bottom-con {
left: 50%;
bottom: 0%;
cursor: s-resize;
}
.edit-top-con {
left: 50%;
top: 0%;
cursor: n-resize;
}
.edit-topleft-con {
left: 0;
top: 0;
cursor: nw-resize;
}
.edit-topright-con {
right: 0;
top: 0;
cursor: ne-resize;
}
.edit-bottomleft-con {
left: 0%;
bottom: 0%;
cursor: sw-resize;
}
.edit-bottomright-con {
right: 0%;
bottom: 0%;
cursor: se-resize;
}
.edit-center-con {
cursor: crosshair;
border-radius: 7px;
background: #999;
border: 1px solid #444;
}
}
</style>
\ No newline at end of file
src/views/Editor/components/editControlView.vue
View file @ d9bba829
<template> <template>
<div class="edit-control-view" @mousedown="moveEdit($event,`mousedown`)" ref="zeroPlayground" @click="onClickTouchLayer"> <div class="edit-control-view" ref="zeroPlayground" @click="onClickTouchLayer">
<div class="edit-con-body" :style="styleEdit"> <div class="edit-con-body" :style="styleEdit" @mousedown="moveEdit($event,`mousedown`)" >
<div class="edit-con-move" @mousedown="editStateCon(`move`)"></div> <div class="edit-con-move" @mousedown="editStateCon(`move`)"></div>
<div class="edit-con-com edit-left-con" @mousedown="editStateCon(`left`)"></div> <div class="edit-con-com edit-left-con" @mousedown="editStateCon(`left`)"></div>
<div class="edit-con-com edit-right-con" @mousedown="editStateCon(`right`)"></div> <div class="edit-con-com edit-right-con" @mousedown="editStateCon(`right`)"></div>
...@@ -45,6 +45,12 @@ export default { ...@@ -45,6 +45,12 @@ export default {
changeHeightStart: 0, changeHeightStart: 0,
changeMoveX: 0, changeMoveX: 0,
changeMoveY: 0, changeMoveY: 0,
changeMoveOffsetX: 0,
changeMoveOffsetY: 0,
changeMoveOffsetX1: 0,
changeMoveOffsetY1: 0,
changeMoveOffsetX2: 0,
changeMoveOffsetY2: 0,
changeEndX: 0, changeEndX: 0,
changeEndY: 0, changeEndY: 0,
catchWidth: 0, catchWidth: 0,
...@@ -66,6 +72,36 @@ export default { ...@@ -66,6 +72,36 @@ export default {
y:e.pageY-this.$refs.zeroPlayground.getBoundingClientRect().top/2 y:e.pageY-this.$refs.zeroPlayground.getBoundingClientRect().top/2
}); });
}, },
matrixToGroup(matrix) {
const a = matrix.a;
const b = matrix.b;
const c = matrix.c;
const d = matrix.d;
//取斜切
var skewX = -Math.atan2(-c, d);
var skewY = Math.atan2(b, a);
const delta = Math.abs(skewX + skewY);
//斜切值和旋转不唯一，所以设定条件只取其一
var rotation;
if (delta < 0.00001 || Math.abs(PI_2 - delta) < 0.00001) {
rotation = skewY;
skewX = skewY = 0;
}
else {
rotation = 0;
}
//转成角度制
rotation = Math.round(rotation * 180/Math.PI)
//取缩放
var scaleX = Math.sqrt((a * a) + (b * b));
var scaleY = Math.sqrt((c * c) + (d * d));
//取位置
var x = matrix.tx;
var y = matrix.ty;
return { rotation, scaleX, scaleY, x, y, skewX, skewY }
},
moveEdit(e, type) { moveEdit(e, type) {
if (!this) { if (!this) {
return; return;
...@@ -76,6 +112,8 @@ export default { ...@@ -76,6 +112,8 @@ export default {
this.canFouce=false this.canFouce=false
this.changeWidthStart = e.x; this.changeWidthStart = e.x;
this.changeHeightStart = e.y; this.changeHeightStart = e.y;
this.changeMoveOffsetX2=e.x;
this.changeMoveOffsetY2=e.y;
this.catchWidthCon(); this.catchWidthCon();
} }
if (type == "mousemove") { if (type == "mousemove") {
...@@ -84,6 +122,17 @@ export default { ...@@ -84,6 +122,17 @@ export default {
} }
this.changeMoveX = e.x - this.changeWidthStart; this.changeMoveX = e.x - this.changeWidthStart;
this.changeMoveY = e.y - this.changeHeightStart; this.changeMoveY = e.y - this.changeHeightStart;
// this.changeMoveOffsetX=e.offsetX
// this.changeMoveOffsetY=e.offsetY
this.changeMoveOffsetX1=e.x;
this.changeMoveOffsetY1=e.y;
this.changeMoveOffsetX=this.changeMoveOffsetX1-this.changeMoveOffsetX2
this.changeMoveOffsetY=this.changeMoveOffsetY1-this.changeMoveOffsetY2
console.log( "this.changeMoveOffsetX",)
this.changeMoveOffsetX2=e.x;
this.changeMoveOffsetY2=e.y;
console.log(this.changeMoveOffsetX)
this.modifyCopyPropertiesCon(); this.modifyCopyPropertiesCon();
} }
...@@ -108,6 +157,8 @@ export default { ...@@ -108,6 +157,8 @@ export default {
this.catchHeight=0; this.catchHeight=0;
this.catchY=0; this.catchY=0;
this.catchY=0; this.catchY=0;
this.changeMoveOffsetX=0
this.changeMoveOffsetY=0
} }
} }
}, },
...@@ -155,111 +206,76 @@ export default { ...@@ -155,111 +206,76 @@ export default {
modifyCopyPropertiesCon() { modifyCopyPropertiesCon() {
if (this.editEvent == "bottomright") { if (this.editEvent == "bottomright") {
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom events.$emit('canvasKeyVupdate', {props:{
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom offset_width:this.changeMoveOffsetX * this.zoom,
this.styleCatch.y=this.catchY offset_height:this.changeMoveOffsetY * this.zoom,
this.styleCatch.x=this.catchX }},"auto");
console.log(this.styleCatch.width)
} else if (this.editEvent == "top") { } else if (this.editEvent == "top") {
events.$emit('canvasKeyVupdate', {props:{
offset_y:this.changeMoveOffsetY * this.zoom,
offset_height:-this.changeMoveOffsetY * this.zoom,
}},"auto");
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom;
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
} else if (this.editEvent == "right") { } else if (this.editEvent == "right") {
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom; events.$emit('canvasKeyVupdate', {props:{
offset_width:this.changeMoveOffsetX * this.zoom,
}},"auto");
} else if (this.editEvent == "left") { } else if (this.editEvent == "left") {
events.$emit('canvasKeyVupdate', {props:{
offset_width:-this.changeMoveOffsetX * this.zoom,
offset_x:this.changeMoveOffsetX * this.zoom,
}},"auto");
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "bottom") { } else if (this.editEvent == "bottom") {
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom events.$emit('canvasKeyVupdate', {props:{
offset_height:this.changeMoveOffsetY * this.zoom,
}},"auto");
} else if (this.editEvent == "topright") { } else if (this.editEvent == "topright") {
events.$emit('canvasKeyVupdate', {props:{
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom offset_width:this.changeMoveOffsetX * this.zoom,
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom offset_height:-this.changeMoveOffsetY * this.zoom,
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom offset_y:this.changeMoveOffsetY * this.zoom,
}},"auto");
} else if (this.editEvent == "topleft") { } else if (this.editEvent == "topleft") {
events.$emit('canvasKeyVupdate', {props:{
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom offset_width:-this.changeMoveOffsetX * this.zoom,
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom offset_height:-this.changeMoveOffsetY * this.zoom,
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom offset_y:this.changeMoveOffsetY * this.zoom,
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom offset_x:this.changeMoveOffsetX * this.zoom,
}},"auto");
} else if (this.editEvent == "bottomleft") { } else if (this.editEvent == "bottomleft") {
events.$emit('canvasKeyVupdate', {props:{
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom offset_width:-this.changeMoveOffsetX * this.zoom,
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom offset_height:+this.changeMoveOffsetY * this.zoom,
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom offset_x:this.changeMoveOffsetX * this.zoom,
}},"auto");
} else if (this.editEvent == "center") { } else if (this.editEvent == "center") {
events.$emit('canvasKeyVupdate', {props:{
this.styleCatch.anchorX=this.catchWidth + this.changeMoveX * this.zoom anchorX:this.catchWidth + this.changeMoveX * this.zoom,
this.styleCatch.anchorY=this.catchHeight + this.changeMoveY * this.zoom anchorY:this.catchHeight + this.changeMoveY * this.zoom,
}},"auto");
} else if (this.editEvent == "move") { } else if (this.editEvent == "move") {
console.log("this.catchY",this.catchY,this.changeMoveY) events.$emit('canvasKeyVupdate', {props:{
offset_x:this.changeMoveOffsetX * this.zoom,
this.styleCatch.ty=this.catchY+this.changeMoveY * this.zoom offset_y:this.changeMoveOffsetY * this.zoom,
this.styleCatch.tx=this.catchX+this.changeMoveX * this.zoom }},"auto");
console.log("this.styleCatch",this.styleCatch.x,this.styleCatch.y)
} }
}, },
modifyPropertiesCon() { modifyPropertiesCon() {
if (this.editEvent == "bottomright") { events.$emit('canvasKeyVupdate', {props:{
this.$store.dispatch("modifyProperties", { offset_width:0,
width: parseInt(this.catchWidth + this.changeMoveX * this.zoom), offset_height:0,
height: parseInt(this.catchHeight + this.changeMoveY * this.zoom), offset_y:0,
y:parseInt(this.catchY), offset_x:0,
x:parseInt(this.catchX) }},"end");
});
}else if (this.editEvent == "top") { if (this.editEvent == "center") {
this.$store.dispatch("modifyProperties", { events.$emit('canvasKeyVupdate', {props:{
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: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
});
} else if (this.editEvent == "left") {
this.$store.dispatch("modifyProperties", {
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: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
});
} else if (this.editEvent == "topright") {
this.$store.dispatch("modifyProperties", {
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: 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: 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: parseInt(this.catchWidth + this.changeMoveX * this.zoom), anchorX: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
anchorY: parseInt(this.catchHeight + this.changeMoveY * this.zoom) anchorY: parseInt(this.catchHeight + this.changeMoveY * this.zoom)
}); }});
} else if (this.editEvent == "move") {
this.$store.dispatch("modifyProperties", {
y:parseInt(this.catchY+this.changeMoveY * this.zoom),
x:parseInt(this.catchX+this.changeMoveX * this.zoom)
});
} }
}, },
editStateCon(state) { editStateCon(state) {
...@@ -280,13 +296,18 @@ export default { ...@@ -280,13 +296,18 @@ export default {
this.moveEdit(e,`mousemove`) this.moveEdit(e,`mousemove`)
}) })
//this.styleCatch=JSON.parse(JSON.stringify(this.targetNode)); //this.styleCatch=JSON.parse(JSON.stringify(this.targetNode));
this.styleCatch={ this.styleCatch={
x:this.targetNode.x, x:this.targetNode.x,
y:this.targetNode.y, y:this.targetNode.y,
tx:this.targetNode.worldMatrix.tx, anchorX:this.targetNode.anchorX,
ty:this.targetNode.worldMatrix.ty, anchorY:this.targetNode.anchorY,
imageWidth:this.targetNode.imageWidth,
imageHeight:this.targetNode.imageHeight,
worldMatrix:this.targetNode.worldMatrix,
width:this.targetNode.width, width:this.targetNode.width,
height:this.targetNode.height, height:this.targetNode.height,
left:this.targetNode.left, left:this.targetNode.left,
...@@ -310,16 +331,21 @@ export default { ...@@ -310,16 +331,21 @@ export default {
if (!this.targetNode) { if (!this.targetNode) {
return {}; return {};
} }
let {rotation,scaleX,scaleY,x,y}=this.matrixToGroup(this.styleCatch.worldMatrix)
console.log("测试矩阵",this.matrixToGroup(this.styleCatch.worldMatrix))
let result={ let result={
width: `${ this.styleCatch.width?this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0)}px`, width: `${ (this.styleCatch.imageWidth?this.styleCatch.imageWidth:(this.styleCatch.width?this.styleCatch.width:0))*scaleX}px`,
height: `${ this.styleCatch.height?this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0)}px`, height: `${ (this.styleCatch.imageHeight?this.styleCatch.imageHeight:(this.styleCatch.height?this.styleCatch.height:0))*scaleY}px`,
marginTop: `${ this.styleCatch.ty?this.styleCatch.ty:0}px`, marginTop:`${y}px`,
marginLeft: `${ this.styleCatch.tx?this.styleCatch.tx:0}px`, marginLeft:`${x}px`,
transform: `rotate(${ this.styleCatch.rotation? this.styleCatch.rotation:0}deg) transform: `rotate(${rotation}deg)`,
scaleX(${ this.styleCatch.scaleX? this.styleCatch.scaleX:1}) // webkitTransformOriginY: `${ this.styleCatch.anchorY?this.styleCatch.anchorY:0}px`,
scaleY(${ this.styleCatch.scaleY? this.styleCatch.scaleY:1})`, // webkitTransformOriginX: `${ this.styleCatch.anchorX?this.styleCatch.anchorX:0}px`,
webkitTransformOriginY: `${ this.styleCatch.anchorY?this.styleCatch.anchorY:0}px`, webkitTransformOrigin:`0px 0px 0px`,
webkitTransformOriginX: `${ this.styleCatch.anchorX?this.styleCatch.anchorX:0}px`, opacity:`${this.canFouce?"1":"0"}`
// transform: `matrix(${this.styleCatch.worldMatrix.a},${this.styleCatch.worldMatrix.b},${this.styleCatch.worldMatrix.c},${this.styleCatch.worldMatrix.d},${this.styleCatch.worldMatrix.tx},${this.styleCatch.worldMatrix.ty})`
} }
return result return result
...@@ -357,22 +383,26 @@ export default { ...@@ -357,22 +383,26 @@ export default {
}, },
"activeComponent.properties":{ "activeComponent.properties":{
handler (newVal) { handler (newVal) {
console.error("样式改变") // console.error("样式改变")
//this.styleCatch=JSON.parse(JSON.stringify(this.activeComponent.properties)); // this.styleCatch=JSON.parse(JSON.stringify(this.activeComponent.properties));
}, },
deep: true deep: true
}, },
targetNode:function(){ targetNode:function(){
console.log("now view data",this.targetNode) console.log("targetNode变化")
let { let {
x, x,
y, y,
anchorX,
anchorY,
width, width,
height, height,
imageWidth,
imageHeight,
left, left,
top, top,
right, right,
worldMatrix,
bottom, bottom,
horizonCenter, horizonCenter,
verticalCenter, verticalCenter,
...@@ -386,13 +416,16 @@ export default { ...@@ -386,13 +416,16 @@ export default {
this.styleCatch={ this.styleCatch={
x, x,
y, y,
tx:this.targetNode.worldMatrix.tx, anchorX,
ty:this.targetNode.worldMatrix.ty, anchorY,
width, width,
height, height,
imageWidth,
imageHeight,
left, left,
top, top,
right, right,
worldMatrix,
bottom, bottom,
horizonCenter, horizonCenter,
verticalCenter, verticalCenter,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment