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>

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 自定義字體