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实现在小方框中浏览大图的代码
Aug 14 Javascript
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
在node中如何使用 ES6
Apr 22 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
对Layer弹窗使用及返回数据接收的实例详解
Sep 26 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 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 Memcached应用实现代码
2010/02/08 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
Prototype Class对象学习
2009/07/19 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
护理自我鉴定范文
2013/10/06 职场文书
毕业生在校学习的自我评价分享
2013/10/08 职场文书
团工委书记自荐书范文
2013/12/17 职场文书
给领导的感谢信范文
2015/01/23 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
2015年加油站工作总结
2015/05/13 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
Elasticsearch 索引操作和增删改查
2022/04/19 Python