添加新的元素

src/components/EditPanel.vue

@@ -14,7 +14,11 @@
             alt="">
           <span class="tab-text">元素</span>
         </div>
-
+        <div v-show="panelState === 15" class="selected-tab" :class="{ active: panelTabState === 0 }">
+          <img style="width:12px; height:15px; vertical-align: middle" src="../assets/images/tab-selected-icon.png"
+            alt="">
+          <span class="tab-text">按钮</span>
+        </div>
       </div>
       <div class="tab" @click="function () { panelTabState = 1 }">
         <div class="selected-tab" :class="{ active: panelTabState === 1 }">
@@ -32,7 +36,7 @@
     </div>
     <div v-show="panelTabState === 0">
       <!-- 文字编辑界面特有控件 -->
-      <div v-show="panelState === 11 && panelState != 14 && panelState != 16">
+      <div v-show="panelState === 11||panelState===15">
 
         <div style="vertical-align: middle;display: flex;flex-direction: column;border-bottom: #E2E4EE solid 1px">
           <div style="font-size: 12px; font-family:MicrosoftYaHei;
@@ -90,7 +94,7 @@
             </div>
           </div>
 
-          <div style="margin-right: 10px">                                                 
+          <div style="margin-right: 10px">
             <div>
               <div style="font-size:12px;
             font-family:MicrosoftYaHei;
@@ -116,7 +120,8 @@
           </div>
         </div>
 
-        <div style="vertical-align: middle;border-bottom: #E2E4EE solid 1px;padding-bottom: 12px; padding-top: 11px;">
+        <div style="vertical-align: middle;border-bottom: #E2E4EE solid 1px;padding-bottom: 12px; padding-top: 11px;"
+          v-show="panelState!=15">
           <div style="display: inline-flex; width:24%;text-align: left; margin-bottom: 10px;">
             <div style="font-size:12px;
             font-family:MicrosoftYaHei;
@@ -185,7 +190,8 @@
 
         </div>
 
-        <div style="text-align: center;border-bottom: #E2E4EE solid 1px;padding-top: 12px;padding-bottom: 12px;">
+        <div style="text-align: center;border-bottom: #E2E4EE solid 1px;padding-top: 12px;padding-bottom: 12px;"
+          v-show="panelState!=15">
           <div style="width:100%; display: flex;flex-direction: row">
             <div
               style="display: inline-flex; overflow: hidden;cursor: pointer;width:50%;justify-content: left; margin-left: 20px;">
@@ -231,7 +237,8 @@
             </el-select>
           </div>
         </div>
-        <div style="text-align: left;border-bottom: #E2E4EE solid 1px; width: 100%;padding-left: 20px;">
+        <div style="text-align: left;border-bottom: #E2E4EE solid 1px; width: 100%;padding-left: 20px;"
+          v-show="panelState!=15">
           <div style="display: inline-flex; margin-left: -6px" v-show="panelState == 11">
             <el-checkbox v-model="element.fontWeight" true-label="bold" false-label="normal">加粗</el-checkbox>
           </div>
@@ -243,9 +250,10 @@
             </el-checkbox>
           </div>
 
-          <div style="display: inline-flex; padding: 12px 0" v-show="panelState == 12">
+          <div style="display: inline-flex; padding: 12px 0" v-show="panelState == 12||panelState == 15">
             <div>
-              <img style="width:100px; height:100px" src="http://yun-image.elab-plus.com/images/dyb/icon_left.png" alt="">
+              <img style="width:100px; height:100px" src="http://yun-image.elab-plus.com/images/dyb/icon_left.png"
+                alt="">
             </div>
             <div style="display:flex; flex-direction: column;margin-left: 16px;">
               <span style="font-size:14px;
@@ -253,12 +261,12 @@
               margin-bottom: 4px;
               color:rgba(100,107,129,1);
               line-height:19px;">当前图片</span>
-              <span  style="font-size:14px;
+              <span style="font-size:14px;
               font-family:MicrosoftYaHei;
               color:rgba(100,107,129,1);
               margin-bottom: 16px;
               line-height:19px;">
-              3iiiiiii.jpg
+                3iiiiiii.jpg
               </span>
               <div style="width:108px;
               height:28px;
@@ -270,7 +278,7 @@
               justify-content: center;
               line-height:28px;">替换元素</div>
             </div>
-            
+
             <!-- <div style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all;line-height: 40px">图片特效
             </div> -->
             <!-- <div style="font-size: 14px;color: #999999;letter-spacing: 0; word-break:keep-all;">
@@ -300,7 +308,8 @@
         </div>
       </div>
 
-      <div style="border-bottom: #E2E4EE solid 1px; width: 100%;padding-left: 20px; padding-bottom: 11px;">
+      <div style="border-bottom: #E2E4EE solid 1px; width: 100%;padding-left: 20px; padding-bottom: 11px;"
+        v-show="panelState!=15">
         <div>
           <div style="font-size:12px;
           font-family:MicrosoftYaHei;
@@ -390,7 +399,7 @@
             style="width: 80%;margin-left: 10px;">
           </el-slider>
         </div>
-        <div v-show="panelState == 12" style="display: flex; flex-direction: row;margin-left: 5px;">
+        <div v-show="panelState == 12||panelState == 15" style="display: flex; flex-direction: row;margin-left: 5px;">
           <div style="font-size:12px;
               font-family:MicrosoftYaHei;
               color:rgba(51,51,51,1);
@@ -402,8 +411,9 @@
         </div>
       </div>
 
-      <div v-show="panelState == 12 || panelState == 13" style="border-bottom: #E2E4EE solid 1px;">
-        <div style="vertical-align: middle;padding-top: 15px;border: 1px solid transparent; padding-left: 20px; padding-right: 20px;">
+      <div v-show="panelState == 12 || panelState == 13||panelState == 15" style="border-bottom: #E2E4EE solid 1px;">
+        <div
+          style="vertical-align: middle;padding-top: 15px;border: 1px solid transparent; padding-left: 20px; padding-right: 20px;">
           <div style="font-size:12px;
             font-family:MicrosoftYaHei;
             color:rgba(51,51,51,1);
@@ -415,7 +425,8 @@
             line-height:16px;letter-spacing: 0;text-align: left;padding-bottom: 5px;float:right;margin-right: 30px;">
             阴影模糊大小</div>
         </div>
-        <div style="vertical-align: middle;padding-top: 20px;border: 1px solid transparent;padding-left: 20px; padding-right: 20px;">
+        <div
+          style="vertical-align: middle;padding-top: 20px;border: 1px solid transparent;padding-left: 20px; padding-right: 20px;">
           <div style="font-size:12px;
             font-family:MicrosoftYaHei;
             color:rgba(51,51,51,1);letter-spacing: 0;text-align: left;padding-bottom: 5px;float:left;">
@@ -425,7 +436,8 @@
             style="font-size:12px;
             font-family:MicrosoftYaHei;
             color:rgba(51,51,51,1);letter-spacing: 0;text-align: left;padding-bottom: 5px;float:right;margin-left:10px">
-            <el-input-number v-model="element.shadowVague" :value="0" style="width: 100px;" size='small'></el-input-number>
+            <el-input-number v-model="element.shadowVague" :value="0" style="width: 100px;" size='small'>
+            </el-input-number>
           </div>
         </div>
 
@@ -434,7 +446,8 @@
         font-family:MicrosoftYaHei;
         color:rgba(51,51,51,1);letter-spacing: 0;text-align: left;float:left;padding-bottom: 5px; padding-left: 20px;">
           阴影偏移距离</div>
-        <div style="vertical-align: middle;padding-top: 20px;border: 1px solid transparent;padding-left: 20px; padding-right: 20px;">
+        <div
+          style="vertical-align: middle;padding-top: 20px;border: 1px solid transparent;padding-left: 20px; padding-right: 20px;">
           <div style="font-size:12px;
             font-family:MicrosoftYaHei;
             color:rgba(51,51,51,1);letter-spacing: 0;text-align: left;padding-bottom: 5px;float:left;">

src/components/Element/ButtonElement.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class='wrap' @mouseover="mouseover" @mouseleave="mouseleave"  @dragstart="dragstart" @mousedown="mousedown" @mouseup="mouseup">
+    <template v-if="!element.eleCanvas">
+      <img :style="{'z-index':1,width:'100%',height:'100%','border-radius': element.circular+'%'}" :src="element.imgSrc&&element.imgSrc.indexOf('http://dm.static.elab-plus.com')>-1?element.imgSrc.replace('http://dm.static.elab-plus.com','https://dm.static.elab-plus.com'):element.imgSrc">
+
+      <img  src="https://dm.static.elab-plus.com/launchTemplate/0a3b783c-c54a-4e13-ba50-8f0ac6bb35f4-%E6%92%AD%E6%94%BE.png"
+            v-show="element.videoEditable" style="z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);display: block"/>
+    </template>
+    <elab-background-canvas v-else-if="element.eleCanvas=='WaterRipple'" :width="element.width" :height="element.height" :cstyle="`position:absolute;z-index: 1;border-radius:${element.circular+'%'}`" :type="element.eleCanvas" :picSrc="element.imgSrc&&element.imgSrc.indexOf('http://dm.static.elab-plus.com')>-1?element.imgSrc.replace('http://dm.static.elab-plus.com','https://dm.static.elab-plus.com'):element.imgSrc"></elab-background-canvas>
+
+    <Operate v-show="showOperate || show|| $store.state.editor.complexEditorElement.indexOf(element)>-1" @mousedown.native.stop="scaleMousedown" @mouseup.native.stop="scaleMouseup" @mousemove.native.stop="scaleMousemove"
+
+    />
+  </div>
+</template>
+
+<script>
+    import Operate from '../Operate'
+    import appConst from '../../util/appConst'
+    import elabBackgroundCanvas from '../../util/canvas/elabBackgroundCanvas'
+    var body = document.body;
+
+    export default{
+      props: {
+        element: {
+          type: Object,
+          require: true
+        },
+        showOperate: {
+          type: Boolean
+        },
+        stopEvent: {
+          type: Boolean
+        },
+        type: ''
+      },
+      data () {
+        return {
+          left: 0,
+          top: 0,
+          width: 0,
+          height: 0,
+          currentX: 0,
+          currentY: 0,
+          flag: false,
+          scaleFlag: false,
+          direction: '',
+          http: appConst.BACKEND_DOMAIN,
+          show:false
+        }
+      },
+      mounted(){
+        window.addEventListener("mouseup",()=>{
+
+          this.$store.state.user.operationFlag=true;
+          this.flag = false
+          this.scaleFlag = false
+        })
+      },
+      methods: {
+        // 处理元素拖动
+        move () {
+          var body = document.body;
+          // var editor = document.querySelector('.editor')
+          document.querySelector('body').onmousemove = (event) => {
+            var e = event || window.event
+            if (this.flag && !this.scaleFlag) {
+              let nowX = e.clientX
+              let nowY = e.clientY
+              let disX = nowX - this.currentX
+              let disY = nowY - this.currentY
+              if(this.$store.state.editor.complexEditorElement.indexOf(this.element)>-1&&this.$store.state.editor.complexEditorElement.length>1){
+                this.$store.state.editor.complexEditorElement.forEach((ele,index)=>{
+                  ele['top'] = disY + this.startTopArr[index]
+                  ele['left'] = ele.type=='frame'?0:disX + this.startLeftArr[index]
+                });
+                return;
+              }
+              this.element.top = parseInt(this.top) + disY
+              this.element.left = parseInt(this.left) + disX
+            }
+          }
+        },
+        // 处理元素伸缩
+        scaleMousemove () {
+          document.querySelector('.editor').onmouseup = (event) => {
+            this.scaleFlag = false
+          }
+          document.querySelector('.editor').onmousemove = (event) => {
+            var e = event || window.event
+            if (this.scaleFlag) {
+              let nowX = e.clientX
+              let nowY = e.clientY
+              let disX = nowX - this.currentX
+              let disY = nowY - this.currentY
+              let  ratio = this.width / this.height
+              switch (this.direction) {
+                // 左边
+                case 'w':
+                  this.element.width = parseInt(this.width) - disX
+                  // this.element.height = parseInt(((this.width) - disX)/ratio)
+                  this.element.left = parseInt(this.left) + disX
+                  break
+                // 右边
+                case 'e':
+                  this.element.width = parseInt(this.width) + disX
+                  // this.element.height = parseInt(((this.width) + disX)/ratio)
+                  break
+                // 上边
+                case 'n':
+                  this.element.height = parseInt(this.height) - disY
+                  // this.element.width = parseInt(((this.height) - disY)*ratio)
+                  this.element.top = parseInt(this.top) + disY
+                  break
+                // 下边
+                case 's':
+                  this.element.height = parseInt(this.height) + disY
+                  // this.element.width = parseInt(((this.height) + disY)*ratio)
+                  break
+                // 左上
+                case 'nw':
+                  // this.element.width = parseInt(this.width) - disX
+                  this.element.width = parseInt(((this.height) - disY)*ratio)
+                  // this.element.left = parseInt(this.left) + disX
+                  this.element.left = parseInt(this.left + disY*ratio)
+                  this.element.height = parseInt(this.height) - disY
+                  this.element.top = parseInt(this.top) + disY
+                  break
+                // 左下
+                case 'sw':
+                  // this.element.width = parseInt(this.width) - disX
+                  this.element.width = parseInt(( (this.height) + disY)*ratio)
+                  // this.element.left = parseInt(this.left) + disX
+                  this.element.left = parseInt(this.left - disY*ratio)
+                  this.element.height = parseInt(this.height) + disY
+                  break
+                // 右上
+                case 'ne':
+                  this.element.height = parseInt(this.height) - disY
+                  this.element.top = parseInt(this.top) + disY
+                  // this.element.width = parseInt(this.width) + disX
+                  this.element.width = parseInt(((this.height) - disY)*ratio)
+                  break
+                // 右下
+                case 'se':
+                  this.element.height = parseInt(this.height) + disY
+                  // this.element.width = parseInt(this.width) + disX
+                  this.element.width = parseInt(((this.height) + disY)*ratio)
+                  break
+              }
+            }
+          }
+        },
+        mousedown (e) {
+          this.$store.state.user.operationFlag=false;
+          if(this.element.locked){
+            return false;
+          }
+          if(this.stopEvent){
+            return false
+          }
+          this.flag = true
+          this.currentX = e.clientX
+          this.currentY = e.clientY
+          if(this.$store.state.editor.complexEditorElement.indexOf(this.element)>-1&&this.$store.state.editor.complexEditorElement.length>1){
+            this.startTopArr=this.$store.state.editor.complexEditorElement.map(v=>v.top)
+            this.startLeftArr=this.$store.state.editor.complexEditorElement.map(v=>v.left)
+          }
+          this.top = this.element.top
+          this.left = this.element.left
+          this.move()
+        },
+        mouseup (e) {
+          this.$store.state.user.operationFlag=true;
+          this.flag = false
+          this.scaleFlag = false
+        },
+        mouseover (e) {
+          if(this.$store.state.editor.editorPage.elements.indexOf(this.element)==-1){
+            return
+          }
+          this.show = true
+        },
+        mouseleave(e){
+          this.show = false
+        },
+        scaleMousedown (e) {
+          this.$store.state.user.operationFlag=false;
+          this.scaleFlag = true
+          this.flag = true
+          this.currentX = e.clientX
+          this.currentY = e.clientY
+          this.top = this.element.top
+          this.left = this.element.left
+          this.width = this.element.width
+          this.height = this.element.height
+          this.direction = e.target.getAttribute('data-direction')
+          this.scaleMousemove()
+        },
+        scaleMouseup (e) {
+          this.$store.state.user.operationFlag=true;
+          this.scaleFlag = false
+          this.flag = false
+        },
+        dragstart (event) {
+          event.preventDefault()
+        }
+      },
+      components: {
+        Operate,
+        elabBackgroundCanvas
+      }
+    }
+</script>
+
+<style lang='less' scoped>
+  .wrap {
+    position: absolute;
+    cursor: move;
+  }
+
+  .wrap img {
+    position: absolute;
+    user-select: none;
+    /*-webkit-user-drag: none;*/
+  }
+</style>

src/components/ImgPanel.vue

@@ -9,7 +9,6 @@
         @click="selectedImg(element)" v-for="element in picList1"></div>
     </template>
     <template v-else>
-
       <div v-if='!isButton' class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }"
         @click="selectedImg(element)" v-for="element in picList2"></div>
       <div v-else class="ele" :style="{ backgroundImage: 'url(' + element.filePath + ')' }"

src/components/Page.vue

@@ -27,6 +27,20 @@
           :showOperate="editorElement == element">
           <img style="width:100%;height:100%;" :src="element.imgSrc">
         </PicElement>
+        <!-- 按钮 -->
+        <ButtonElement :type="type" v-if="element.type==='button'"
+          :class="['animated ' + element.animatedName,element.loop?'infinite':'']" :element="element"
+          :style="{transform:'rotate('+element.transform+'deg)',
+                    'z-index':element.zindex,opacity:element.opacity/100,
+                    width:element.width+'px',height:element.height+'px',
+                    top:element.top+'px',left:element.left + 'px',
+                    'animation-duration':element.duration + 's',
+                    '-webkit-animation-duration':element.duration + 's',
+                    'animation-delay':element.delay + 's','-webkit-animation-delay':element.delay + 's',
+                    'box-shadow':element.shadowColor +' ' + (element.shadowX==null?0:element.shadowX)+'px ' + (element.shadowY==null?0:element.shadowY)+'px ' + (element.shadowVague==null?0:element.shadowVague)+'px '}"
+          :showOperate="editorElement == element">
+          <img style="width:100%;height:100%;" :src="element.imgSrc">
+        </ButtonElement>
         <!-- 字体元素 -->
         <FontElement :isOverView="isOverView" class="element" v-if="element.type === 'text'" :element="element"
           :style="elementPosition(element)"></FontElement>
@@ -66,6 +80,7 @@
 
 <script>
 import PicElement from "./Element/PicElement";
+import ButtonElement from "./Element/ButtonElement";
 import FontElement from "./Element/FontElement";
 import ShapesElement from "./Element/ShapesElement";
 import MorePicElement from "./Element/morePicElement";
@@ -275,6 +290,7 @@ export default {
   },
   components: {
     PicElement,
+    ButtonElement,
     FontElement,
     ShapesElement,
     MorePicElement,

src/views/h5editor/index.vue

@@ -263,7 +263,7 @@
           </div>
           <!-- 添加元素 2 -->
           <div class="panel panel-element clearfix" v-show="panelState === 2">
-            <ImgPanel :selectedImg="addPicElement" :themeId="itemId" :isButton ="false" />
+            <ImgPanel :selectedImg="addPicElement" :themeId="itemId" :isButton="false" />
           </div>
           <!-- 添加多图上元素 3 -->
           <div class="panel panel-element clearfix" v-if="panelState === 3">
@@ -271,7 +271,7 @@
           </div>
           <!-- 添加按钮 4 -->
           <div class="panel panel-element clearfix" v-if="panelState === 4">
-            <ImgPanel :selectedImg="addButtonElement" :themeId="itemId" :isButton ="true" />
+            <ImgPanel :selectedImg="addButtonElement" :themeId="itemId" :isButton="true" />
           </div>
           <!-- 图层编辑面板 -->
           <EditPanel :element="element" :panelState="panelState" v-if="panelState > 10" />
@@ -376,6 +376,9 @@
           case "frame":
             this.panelState = 14;
             break;
+          case "button":
+            this.panelState = 15;
+            break;
           case "group":
             this.panelState = 0;
           default:
@@ -485,6 +488,24 @@
         this.$store.dispatch("addElement", obj);
         this.element.type = "morePic";
       },
+      //添加按钮
+      addButtonElement(ele) {
+        // if (ele) {
+        let obj = {};
+        obj.type = "button";
+        obj.top = document.getElementById("h5editor").scrollTop;
+        obj.left = 0;
+        obj.width = ele.width;
+        obj.height = ele.height;
+        obj.imgSrc = ele.filePath;
+        obj.loop = ele.loop;
+        this.$store.dispatch("addElement", obj);
+        // } else {
+        //   this.$store.dispatch('addElement', this.element)
+        // }
+        this.element.type = "button";
+      },
+
       addBG(file) {
         this.$store.dispatch("addBGElement", {
           type: "bg",