dragtoresize什么意思_Vue-drag-resize 拖拽缩放插件的使用(简单示例)

字幕

:style="{'height': parentHeight + 'px', 'width': parentWidth + 'px'}">

style="overflow: hidden;"

:w="rect.BoxWidth"

:h="rect.BoxHeight"

:x="rect.BoxLeft"

:y="rect.BoxTop"

@resizing="textResize($event, index)"

@dragging="textResize($event, index)">

:style={backgroundColor:rect.BoxColor,opacity:rect.BoxOpacity}>

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

logo

:parentLimitation="true"

:w="rect.Width"

:h="rect.Height"

:x="rect.Left"

:y="rect.Top"

@resizing="logoResize($event, index)"

@dragging="logoResize($event, index)">

style="width: 100%;height: 100%;">

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 自定义字体

总结

以上所述是小编给大家介绍的Vue-drag-resize 拖拽缩放插件的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

本文标题: Vue-drag-resize 拖拽缩放插件的使用(简单示例)

本文地址: http://www.cppcns.com/wangluo/javascript/290539.html