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

字幕<divid="lBox"style="background-color:#D7E9F5;":style="{'height':parentHeight+'px','width':parentWidth+'px'}">

字幕

<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 拖拽缩放插件的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

Vue拖拽缩放插件 Vue拖拽插件 Vue-drag-resize