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 相关文章推荐
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
有趣的javascript数组定义方法
Sep 10 Javascript
基于JQuery实现相同内容合并单元格的代码
Jan 12 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
ES6 Class中实现私有属性的一些方法总结
Jul 08 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
php基础学习之变量的使用
2011/06/09 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
原生javascript兼容性测试实例
2013/07/01 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
node.js 抓取代理ip实例代码
2017/04/30 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
python网络编程示例(客户端与服务端)
2014/04/24 Python
python简单猜数游戏实例
2015/07/09 Python
Python中字典和集合学习小结
2017/07/07 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python3.x上post发送json数据
2018/03/04 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
简单的辞职信范文
2014/01/18 职场文书
医学生自我评价
2014/01/27 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
建国大业观后感600字
2015/06/01 职场文书
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python