欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-31 14:07:08
字幕

字幕

<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>

logo

 <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>

js

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("."))
 }

除此之外还有字幕向左或向右滚动的css

 .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%);
 }
 }

and:

自定义字体在

css @font-face 自定义字体

总结

以上所述是小编给大家介绍的vue-drag-resize 拖拽缩放插件的使用,希望对大家有所帮助