当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue-drag-resize 拖拽缩放插件的使用(简单示例)

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

2020年03月09日  | 移动技术网IT编程  | 我要评论

另类爱情 林洁如,足球秦协小窝,325国道

字幕

<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 拖拽缩放插件的使用，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网