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 相关文章推荐
js中的异常处理try...catch使用介绍
Sep 21 Javascript
JavaScript AJAX之惰性载入函数
Aug 27 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
微信小程序删除处理详解
Aug 16 Javascript
AngularJS监听ng-repeat渲染完成的方法
Mar 20 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
Vue.use源码学习小结
Jun 20 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
JavaScript 反射学习技巧
Oct 16 Javascript
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
thinkphp实现like模糊查询实例
2014/10/29 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
学习PHP session的传递方式
2016/06/15 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
prototype1.4中文手册
2006/09/22 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
文档对象模型DOM通俗讲解
2013/11/01 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
基于wxpython实现的windows GUI程序实例
2015/05/30 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python numpy--数组的组合和分割实例
2020/02/24 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
金融系毕业生自荐书
2014/07/08 职场文书
员工安全生产责任书
2014/07/22 职场文书
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL