Vue-drag-resize 拖拽缩放插件的使用(简单示例)

<div id="lbox" style="background-color: #d7e9f5;"
     :style="{'height': parentheight + 'px', 'width': parentwidth + 'px'}">
     
 <drag-resize v-for="(rect,index) in texts"
       style="overflow: hidden;"
       :w="rect.boxwidth"
       :h="rect.boxheight"
       :x="rect.boxleft"
       :y="rect.boxtop"
       @resizing="textresize($event, index)" 
       @dragging="textresize($event, index)">
       
 <div style="width: 100%; height: 100%;"
 :style={backgroundcolor:rect.boxcolor,opacity:rect.boxopacity}>
 </div><!-- 控制背景色及背景透明度 使背景透明度不影响字幕 -->
    
 <div style="width: 100%; height: 100%;">
    <p :class="rect.direction === 'left to right' ? 'roll-right' : 'roll-left'"
      style="width: 100%; position:absolute; bottom:-0.25em;left:0px"
      :style="{color: rect.textcolor,fontfamily: rect.fontfile,
     fontsize: rect.fontsize+'px',
     opacity:rect.fontopacity,
     animationduration: rect.speed + 's'}">
     {{rect.text}}
    </p>
 </div>
 
 </drag-resize>

 <drag-resize v-for="(rect,index) in logos"
      :parentlimitation="true"
      :w="rect.width"
      :h="rect.height"
      :x="rect.left"
      :y="rect.top"
      @resizing="logoresize($event, index)" 
      @dragging="logoresize($event, index)">
       
    <div style="width: 100%;height: 100%;">
     <img :src="'/logos/' + rect.filename"
      style="width: 100%;height: 100%;">
    </div>
    
 </drag-resize>
</div>

textresize(newrect, index) {
  const boxwidth = newrect.width+''
  this.texts[index].boxwidth = boxwidth.substring(0, boxwidth.indexof("."))

  const boxheight = newrect.height+''
  this.texts[index].boxheight = boxheight.substring(0, boxheight.indexof("."))

  const boxtop = newrect.top+''
  this.texts[index].boxtop = boxtop.substring(0, boxtop.indexof("."))

  const boxleft = newrect.left+''
  this.texts[index].boxleft = boxleft.substring(0, boxleft.indexof("."))
 }

 logoresize(newrect, index) {
  const width = newrect.width''
  this.logos[index].width = width.substring(0, size.indexof("."))
  
  const height = newrect.height+''
  this.logos[index].height = height .substring(0, size.indexof("."))
  
  const top = newrect.top+''
  this.logos[index].top = top.substring(0, top.indexof("."))

  const left = newrect.left+''
  this.logos[index].left = left.substring(0, left.indexof("."))
 }

 .roll-left {
 animation: wordsloopleft 6s linear infinite normal;
 }

 .roll-right {
 animation: wordsloopright 6s linear infinite normal;
 }

 @keyframes wordsloopleft {
 0% {
  transform: translatex(100%);
  -webkit-transform: translatex(100%);
 }
 100% {
  transform: translatex(-40%);
  -webkit-transform: translatex(-40%);
 }
 }

 @keyframes wordsloopright {
 0% {
  transform: translatex(-40%);
  -webkit-transform: translatex(-40%);
 }
 100% {
  transform: translatex(100%);
  -webkit-transform: translatex(100%);
 }
 }