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


Posted in Javascript onDecember 04, 2019

字幕

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

自定义字体在

总结

以上所述是小编给大家介绍的Vue-drag-resize 拖拽缩放插件的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
JavaScript数组复制详解
Feb 02 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
Oct 11 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
jQuery实现全选、反选和不选功能的方法详解
Dec 04 #jQuery
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 #Javascript
Vue实现base64编码图片间的切换功能
Dec 04 #Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 04 #Javascript
Vue实现图片与文字混输效果
Dec 04 #Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 #Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 #Javascript
You might like
php设计模式 Facade(外观模式)
2011/06/26 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
工厂模式在JS中的实践
2017/01/18 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
python k-近邻算法实例分享
2014/06/11 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
python样条插值的实现代码
2018/12/17 Python
python 二维数组90度旋转的方法
2019/01/28 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Django的CVB实例详解
2020/02/10 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
《祁黄羊》教学反思
2014/04/22 职场文书
学校教师读书活动总结
2014/07/08 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
redis限流的实际应用
2021/04/24 Redis
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
浅谈Python协程asyncio
2021/06/20 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis
Golang 切片(Slice)实现增删改查
2022/04/22 Golang