123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354 |
- <template>
- <div class='wrap' @mouseover="mouseover" @mouseleave="mouseleave" @dragstart="dragstart" @mousedown="mousedown"
- @mouseup="mouseup">
- <template v-if="!element.eleCanvas">
- <img :style="{'z-index':1,width:'100%',height:'100%','border-radius': element.circular+'%'}"
- :src="element.backgroundUnselectedImg">
- <img
- src="https://dm.static.elab-plus.com/launchTemplate/0a3b783c-c54a-4e13-ba50-8f0ac6bb35f4-%E6%92%AD%E6%94%BE.png"
- v-show="element.videoEditable"
- style="z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);display: block" />
- <section class="content">
- <!-- 默认属性动画 -->
- <div :class="'animated ' + this.element['animatedName']" :style="styleAnime" v-if="element['animatedFont']">
- <myfont :duration="element.duration" :delay="element.delay" :loop="element.loop"
- :fonts="element.text.replace(/\n/g,'^').split('')" :class="element['animatedFont']"
- :fontstyle="element['animatedFont']" :highLightDelimitId="isOverView?'':element.nodeId"
- :elabEditable="element['elabEditable']||true" :style="styleBasic">{{ element.text }}</myfont>
- </div>
- <div :class="'animated ' + this.element['animatedName']" :style="styleAnime"
- v-else-if="this.element['animatedType']==0">
- <div :highLightDelimitId="isOverView?'':element.nodeId" :elabEditable="element['elabEditable']||true"
- :style="styleBasic" :class="this.element['animatedFont'] ">{{ element.text }}</div>
- </div>
- <div :class="'animated ' + this.element['animatedName']" :style="styleAnime" v-else>
- <div :highLightDelimitId="isOverView?'':element.nodeId" :elabEditable="element['elabEditable']||true"
- :style="styleBasic" :class="this.element['animatedFont'] ">{{ element.text }}</div>
- </div>
- </section>
- </template>
- <elab-background-canvas v-else-if="element.eleCanvas=='WaterRipple'" :width="element.width" :height="element.height"
- :cstyle="`position:absolute;z-index: 1;border-radius:${element.circular+'%'}`" :type="element.eleCanvas"
- :picSrc="element.backgroundUnselectedImg">
- </elab-background-canvas>
- <Operate v-show="showOperate || show|| $store.state.editor.complexEditorElement.indexOf(element)>-1"
- @mousedown.native.stop="scaleMousedown" @mouseup.native.stop="scaleMouseup"
- @mousemove.native.stop="scaleMousemove" />
- </div>
- </template>
- <script>
- import Operate from '../Operate'
- import appConst from '../../util/appConst'
- import myfont from '../font/font'
- import elabBackgroundCanvas from '../../util/canvas/elabBackgroundCanvas'
- var body = document.body;
- export default {
- props: {
- element: {
- type: Object,
- require: true
- },
- showOperate: {
- type: Boolean
- },
- stopEvent: {
- type: Boolean
- },
- type: '',
- isOverView:Boolean
- },
- data() {
- return {
- left: 0,
- top: 0,
- width: 0,
- height: 0,
- currentX: 0,
- currentY: 0,
- flag: false,
- scaleFlag: false,
- direction: '',
- http: appConst.BACKEND_DOMAIN,
- show: false
- }
- },
- mounted() {
- window.addEventListener("mouseup", () => {
- this.$store.state.user.operationFlag = true;
- this.flag = false
- this.scaleFlag = false
- })
- },
- methods: {
- // 处理元素拖动
- move() {
- var body = document.body;
- // var editor = document.querySelector('.editor')
- document.querySelector('body').onmousemove = (event) => {
- var e = event || window.event
- if (this.flag && !this.scaleFlag) {
- let nowX = e.clientX
- let nowY = e.clientY
- let disX = nowX - this.currentX
- let disY = nowY - this.currentY
- if (this.$store.state.editor.complexEditorElement.indexOf(this.element) > -1 && this.$store.state.editor.complexEditorElement.length > 1) {
- this.$store.state.editor.complexEditorElement.forEach((ele, index) => {
- ele['top'] = disY + this.startTopArr[index]
- ele['left'] = ele.type == 'frame' ? 0 : disX + this.startLeftArr[index]
- });
- return;
- }
- this.element.top = parseInt(this.top) + disY
- this.element.left = parseInt(this.left) + disX
- }
- }
- },
- // 处理元素伸缩
- scaleMousemove() {
- document.querySelector('.editor').onmouseup = (event) => {
- this.scaleFlag = false
- }
- document.querySelector('.editor').onmousemove = (event) => {
- var e = event || window.event
- if (this.scaleFlag) {
- let nowX = e.clientX
- let nowY = e.clientY
- let disX = nowX - this.currentX
- let disY = nowY - this.currentY
- let ratio = this.width / this.height
- switch (this.direction) {
- // 左边
- case 'w':
- this.element.width = parseInt(this.width) - disX
- // this.element.height = parseInt(((this.width) - disX)/ratio)
- this.element.left = parseInt(this.left) + disX
- break
- // 右边
- case 'e':
- this.element.width = parseInt(this.width) + disX
- // this.element.height = parseInt(((this.width) + disX)/ratio)
- break
- // 上边
- case 'n':
- this.element.height = parseInt(this.height) - disY
- // this.element.width = parseInt(((this.height) - disY)*ratio)
- this.element.top = parseInt(this.top) + disY
- break
- // 下边
- case 's':
- this.element.height = parseInt(this.height) + disY
- // this.element.width = parseInt(((this.height) + disY)*ratio)
- break
- // 左上
- case 'nw':
- // this.element.width = parseInt(this.width) - disX
- this.element.width = parseInt(((this.height) - disY) * ratio)
- // this.element.left = parseInt(this.left) + disX
- this.element.left = parseInt(this.left + disY * ratio)
- this.element.height = parseInt(this.height) - disY
- this.element.top = parseInt(this.top) + disY
- break
- // 左下
- case 'sw':
- // this.element.width = parseInt(this.width) - disX
- this.element.width = parseInt(((this.height) + disY) * ratio)
- // this.element.left = parseInt(this.left) + disX
- this.element.left = parseInt(this.left - disY * ratio)
- this.element.height = parseInt(this.height) + disY
- break
- // 右上
- case 'ne':
- this.element.height = parseInt(this.height) - disY
- this.element.top = parseInt(this.top) + disY
- // this.element.width = parseInt(this.width) + disX
- this.element.width = parseInt(((this.height) - disY) * ratio)
- break
- // 右下
- case 'se':
- this.element.height = parseInt(this.height) + disY
- // this.element.width = parseInt(this.width) + disX
- this.element.width = parseInt(((this.height) + disY) * ratio)
- break
- }
- }
- }
- },
- mousedown(e) {
- this.$store.state.user.operationFlag = false;
- if (this.element.locked) {
- return false;
- }
- if (this.stopEvent) {
- return false
- }
- this.flag = true
- this.currentX = e.clientX
- this.currentY = e.clientY
- if (this.$store.state.editor.complexEditorElement.indexOf(this.element) > -1 && this.$store.state.editor.complexEditorElement.length > 1) {
- this.startTopArr = this.$store.state.editor.complexEditorElement.map(v => v.top)
- this.startLeftArr = this.$store.state.editor.complexEditorElement.map(v => v.left)
- }
- this.top = this.element.top
- this.left = this.element.left
- this.move()
- },
- mouseup(e) {
- this.$store.state.user.operationFlag = true;
- this.flag = false
- this.scaleFlag = false
- },
- mouseover(e) {
- if (this.$store.state.editor.editorPage.elements.indexOf(this.element) == -1) {
- return
- }
- this.show = true
- },
- mouseleave(e) {
- this.show = false
- },
- scaleMousedown(e) {
- this.$store.state.user.operationFlag = false;
- this.scaleFlag = true
- this.flag = true
- this.currentX = e.clientX
- this.currentY = e.clientY
- this.top = this.element.top
- this.left = this.element.left
- this.width = this.element.width
- this.height = this.element.height
- this.direction = e.target.getAttribute('data-direction')
- this.scaleMousemove()
- },
- scaleMouseup(e) {
- this.$store.state.user.operationFlag = true;
- this.scaleFlag = false
- this.flag = false
- },
- dragstart(event) {
- event.preventDefault()
- }
- },
- components: {
- Operate,
- myfont,
- elabBackgroundCanvas
- },
- computed: {
- editingElement () {
- return this.$store.getters['editingElement']
- },
- styleAnime () {
- var playing = this.element['playing']
- //粒子滚动效果
- if (this.element['animatedType'] == 1) {
- ////粒子滚动效果,如果设置了延迟播放大小,则进行判断,默认是不延迟,默认的虚线宽度是70
- if (this.element['delay'] ==0) {
- if (playing) {
- return {
- animationName: this.element['animatedName'],
- animationDuration: this.element['duration']+'s',
- animationTimingFunction: 'linear',
- animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
- }
- }
- //stroke动画不动的情况,stroke填充线条
- return {
- // animationName: this.element['animatedName'],
- strokeDasharray: '300 400',
- animationDuration: this.element['duration']+'s',
- animationTimingFunction: 'linear',
- animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
- }
- }
- return {
- animationName: this.element['animatedName'],
- animationDuration: this.element['duration']+'s',
- animationTimingFunction: 'linear',
- animationDelay: this.element['delay'] + 's',
- animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
- }
- } else if (this.element['animatedType'] == 2) { //类似抖音抖动动画
- var sharksScroll = {
- animationDirection: 'reverse',
- animationFillMode: 'none',
- animationPlayState: 'running',
- animationTimingFunction: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
- animationDelay: this.element['delay'] + 's',
- animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
- animationDuration: this.element['duration']+'s',
- animationDelay: this.element['delay'] + 's',
- };
- if (playing) {
- sharksScroll = {
- animationDirection: 'reverse',
- animationFillMode: 'none',
- animationPlayState: 'running',
- animationName: this.element['animatedName'],
- animationTimingFunction: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
- animationDelay: this.element['delay'] + 's',
- animationIterationCount: (this.element['loop'] ? 'infinite' : 'initial'),
- animationDuration: this.element['duration']+'s',
- animationDelay: this.element['delay'] + 's',
- }
- }
- return sharksScroll;
- }
- return {
- animationIterationCount: this.element['loop'] ? 'infinite' : 'initial',
- animationDuration: this.element['duration'] + 's',
- animationDelay: this.element['delay'] + 's'
- }
- },
- styleBasic () {
- return {
- width: this.element['width'] + 'px',
- height: this.element['height'] + 'px',
- lineHeight: this.element['lineHeight'],
- color: this.element['color'],
- backgroundColor: this.element['allTransparent'] || this.element['backgroundColor'],
- textAlign: this.element['textAlign'],
- fontSize: this.element['fontSize'] + 'px',
- fontWeight: this.element['fontWeight'],
- 'font-family': this.element['fontFamily'],
- opacity: this.element['opacity'] / 100,
- transform: 'rotate(' + this.element['transform'] + 'deg' + ')',
- 'vertical-align': this.element['verticalAlign'],
- display: this.element['display'],
- 'text-indent': this.element['textIndent'] + 'em',
- 'letter-spacing': this.element['letterSpacing'] + 'em',
- 'writing-mode' : this.element['verticalFont'],
- 'white-space' : this.element['verticalFont'] ? 'pre' : 'pre-wrap'
- }
- }
- },
- }
- </script>
- <style lang='less' scoped>
- .content {
- /*white-space: pre-wrap;*/
- word-wrap: break-word;
- position: absolute;
- top: 0;
- z-index: 3;
- }
- .wrap {
- position: absolute;
- cursor: move;
- }
- .wrap img {
- position: absolute;
- user-select: none;
- /*-webkit-user-drag: none;*/
- }
- </style>
|