mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
fix: 旋转后的元素执行动画异常
This commit is contained in:
pipipi-pikachu
parent
48660ed8ec
commit
5b9b117fcb
@ -9,28 +9,33 @@
|
|||||||
transform: `rotate(${elementInfo.rotate}deg)`,
|
transform: `rotate(${elementInfo.rotate}deg)`,
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="element-content"
|
class="rotate-wrapper"
|
||||||
:style="{
|
:style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
|
||||||
filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
|
|
||||||
transform: flipStyle,
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<ImageOutline :elementInfo="elementInfo" />
|
<div
|
||||||
|
class="element-content"
|
||||||
|
:style="{
|
||||||
|
filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
|
||||||
|
transform: flipStyle,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<ImageOutline :elementInfo="elementInfo" />
|
||||||
|
|
||||||
<div class="image-content" :style="{ clipPath: clipShape.style }">
|
<div class="image-content" :style="{ clipPath: clipShape.style }">
|
||||||
<img
|
<img
|
||||||
:src="elementInfo.src"
|
:src="elementInfo.src"
|
||||||
:draggable="false"
|
:draggable="false"
|
||||||
:style="{
|
:style="{
|
||||||
top: imgPosition.top,
|
top: imgPosition.top,
|
||||||
left: imgPosition.left,
|
left: imgPosition.left,
|
||||||
width: imgPosition.width,
|
width: imgPosition.width,
|
||||||
height: imgPosition.height,
|
height: imgPosition.height,
|
||||||
filter: filter,
|
filter: filter,
|
||||||
}"
|
}"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -85,7 +90,10 @@ export default defineComponent({
|
|||||||
.base-element-image {
|
.base-element-image {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
.rotate-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.element-content {
|
.element-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -7,46 +7,50 @@
|
|||||||
left: elementInfo.left + 'px',
|
left: elementInfo.left + 'px',
|
||||||
width: elementInfo.width + 'px',
|
width: elementInfo.width + 'px',
|
||||||
height: elementInfo.height + 'px',
|
height: elementInfo.height + 'px',
|
||||||
transform: `rotate(${elementInfo.rotate}deg)`,
|
|
||||||
}"
|
}"
|
||||||
@mousedown="$event => handleSelectElement($event)"
|
@mousedown="$event => handleSelectElement($event)"
|
||||||
>
|
>
|
||||||
<ImageClipHandler
|
<div
|
||||||
v-if="isCliping"
|
class="rotate-wrapper"
|
||||||
:src="elementInfo.src"
|
:style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
|
||||||
:clipData="elementInfo.clip"
|
|
||||||
:width="elementInfo.width"
|
|
||||||
:height="elementInfo.height"
|
|
||||||
:top="elementInfo.top"
|
|
||||||
:left="elementInfo.left"
|
|
||||||
:clipPath="clipShape.style"
|
|
||||||
@clip="range => handleClip(range)"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="element-content"
|
|
||||||
v-else
|
|
||||||
v-contextmenu="contextmenus"
|
|
||||||
:style="{
|
|
||||||
filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
|
|
||||||
transform: flipStyle,
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<ImageOutline :elementInfo="elementInfo" />
|
<ImageClipHandler
|
||||||
|
v-if="isCliping"
|
||||||
|
:src="elementInfo.src"
|
||||||
|
:clipData="elementInfo.clip"
|
||||||
|
:width="elementInfo.width"
|
||||||
|
:height="elementInfo.height"
|
||||||
|
:top="elementInfo.top"
|
||||||
|
:left="elementInfo.left"
|
||||||
|
:clipPath="clipShape.style"
|
||||||
|
@clip="range => handleClip(range)"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="element-content"
|
||||||
|
v-else
|
||||||
|
v-contextmenu="contextmenus"
|
||||||
|
:style="{
|
||||||
|
filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
|
||||||
|
transform: flipStyle,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<ImageOutline :elementInfo="elementInfo" />
|
||||||
|
|
||||||
<div class="image-content" :style="{ clipPath: clipShape.style }">
|
<div class="image-content" :style="{ clipPath: clipShape.style }">
|
||||||
<img
|
<img
|
||||||
:src="elementInfo.src"
|
:src="elementInfo.src"
|
||||||
:draggable="false"
|
:draggable="false"
|
||||||
:style="{
|
:style="{
|
||||||
top: imgPosition.top,
|
top: imgPosition.top,
|
||||||
left: imgPosition.left,
|
left: imgPosition.left,
|
||||||
width: imgPosition.width,
|
width: imgPosition.width,
|
||||||
height: imgPosition.height,
|
height: imgPosition.height,
|
||||||
filter: filter,
|
filter: filter,
|
||||||
}"
|
}"
|
||||||
@dragstart.prevent
|
@dragstart.prevent
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -149,7 +153,10 @@ export default defineComponent({
|
|||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.rotate-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.element-content {
|
.element-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -6,47 +6,51 @@
|
|||||||
left: elementInfo.left + 'px',
|
left: elementInfo.left + 'px',
|
||||||
width: elementInfo.width + 'px',
|
width: elementInfo.width + 'px',
|
||||||
height: elementInfo.height + 'px',
|
height: elementInfo.height + 'px',
|
||||||
transform: `rotate(${elementInfo.rotate}deg)`,
|
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="element-content"
|
class="rotate-wrapper"
|
||||||
:style="{
|
:style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
|
||||||
opacity: elementInfo.opacity,
|
|
||||||
filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
|
|
||||||
transform: flipStyle,
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<SvgWrapper
|
<div
|
||||||
overflow="visible"
|
class="element-content"
|
||||||
:width="elementInfo.width"
|
:style="{
|
||||||
:height="elementInfo.height"
|
opacity: elementInfo.opacity,
|
||||||
|
filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
|
||||||
|
transform: flipStyle,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<defs v-if="elementInfo.gradient">
|
<SvgWrapper
|
||||||
<GradientDefs
|
overflow="visible"
|
||||||
:id="`base-gradient-${elementInfo.id}`"
|
:width="elementInfo.width"
|
||||||
:type="elementInfo.gradient.type"
|
:height="elementInfo.height"
|
||||||
:color1="elementInfo.gradient.color[0]"
|
|
||||||
:color2="elementInfo.gradient.color[1]"
|
|
||||||
:rotate="elementInfo.gradient.rotate"
|
|
||||||
/>
|
|
||||||
</defs>
|
|
||||||
<g
|
|
||||||
:transform="`scale(${elementInfo.width / elementInfo.viewBox}, ${elementInfo.height / elementInfo.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`"
|
|
||||||
>
|
>
|
||||||
<path
|
<defs v-if="elementInfo.gradient">
|
||||||
vector-effect="non-scaling-stroke"
|
<GradientDefs
|
||||||
stroke-linecap="butt"
|
:id="`base-gradient-${elementInfo.id}`"
|
||||||
stroke-miterlimit="8"
|
:type="elementInfo.gradient.type"
|
||||||
stroke-linejoin=""
|
:color1="elementInfo.gradient.color[0]"
|
||||||
:d="elementInfo.path"
|
:color2="elementInfo.gradient.color[1]"
|
||||||
:fill="elementInfo.gradient ? `url(#base-gradient-${elementInfo.id})` : elementInfo.fill"
|
:rotate="elementInfo.gradient.rotate"
|
||||||
:stroke="outlineColor"
|
/>
|
||||||
:stroke-width="outlineWidth"
|
</defs>
|
||||||
:stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'"
|
<g
|
||||||
></path>
|
:transform="`scale(${elementInfo.width / elementInfo.viewBox}, ${elementInfo.height / elementInfo.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`"
|
||||||
</g>
|
>
|
||||||
</SvgWrapper>
|
<path
|
||||||
|
vector-effect="non-scaling-stroke"
|
||||||
|
stroke-linecap="butt"
|
||||||
|
stroke-miterlimit="8"
|
||||||
|
stroke-linejoin=""
|
||||||
|
:d="elementInfo.path"
|
||||||
|
:fill="elementInfo.gradient ? `url(#base-gradient-${elementInfo.id})` : elementInfo.fill"
|
||||||
|
:stroke="outlineColor"
|
||||||
|
:stroke-width="outlineWidth"
|
||||||
|
:stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'"
|
||||||
|
></path>
|
||||||
|
</g>
|
||||||
|
</SvgWrapper>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -96,7 +100,10 @@ export default defineComponent({
|
|||||||
.base-element-shape {
|
.base-element-shape {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
.rotate-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.element-content {
|
.element-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -7,49 +7,53 @@
|
|||||||
left: elementInfo.left + 'px',
|
left: elementInfo.left + 'px',
|
||||||
width: elementInfo.width + 'px',
|
width: elementInfo.width + 'px',
|
||||||
height: elementInfo.height + 'px',
|
height: elementInfo.height + 'px',
|
||||||
transform: `rotate(${elementInfo.rotate}deg)`,
|
|
||||||
}"
|
}"
|
||||||
@mousedown="$event => handleSelectElement($event)"
|
@mousedown="$event => handleSelectElement($event)"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="element-content"
|
class="rotate-wrapper"
|
||||||
v-contextmenu="contextmenus"
|
:style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
|
||||||
:style="{
|
|
||||||
opacity: elementInfo.opacity,
|
|
||||||
filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
|
|
||||||
transform: flipStyle,
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<SvgWrapper
|
<div
|
||||||
overflow="visible"
|
class="element-content"
|
||||||
:width="elementInfo.width"
|
v-contextmenu="contextmenus"
|
||||||
:height="elementInfo.height"
|
:style="{
|
||||||
|
opacity: elementInfo.opacity,
|
||||||
|
filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
|
||||||
|
transform: flipStyle,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<defs v-if="elementInfo.gradient">
|
<SvgWrapper
|
||||||
<GradientDefs
|
overflow="visible"
|
||||||
:id="`editabel-gradient-${elementInfo.id}`"
|
:width="elementInfo.width"
|
||||||
:type="elementInfo.gradient.type"
|
:height="elementInfo.height"
|
||||||
:color1="elementInfo.gradient.color[0]"
|
|
||||||
:color2="elementInfo.gradient.color[1]"
|
|
||||||
:rotate="elementInfo.gradient.rotate"
|
|
||||||
/>
|
|
||||||
</defs>
|
|
||||||
<g
|
|
||||||
:transform="`scale(${elementInfo.width / elementInfo.viewBox}, ${elementInfo.height / elementInfo.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`"
|
|
||||||
>
|
>
|
||||||
<path
|
<defs v-if="elementInfo.gradient">
|
||||||
vector-effect="non-scaling-stroke"
|
<GradientDefs
|
||||||
stroke-linecap="butt"
|
:id="`editabel-gradient-${elementInfo.id}`"
|
||||||
stroke-miterlimit="8"
|
:type="elementInfo.gradient.type"
|
||||||
stroke-linejoin=""
|
:color1="elementInfo.gradient.color[0]"
|
||||||
:d="elementInfo.path"
|
:color2="elementInfo.gradient.color[1]"
|
||||||
:fill="elementInfo.gradient ? `url(#editabel-gradient-${elementInfo.id})` : elementInfo.fill"
|
:rotate="elementInfo.gradient.rotate"
|
||||||
:stroke="outlineColor"
|
/>
|
||||||
:stroke-width="outlineWidth"
|
</defs>
|
||||||
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
|
<g
|
||||||
></path>
|
:transform="`scale(${elementInfo.width / elementInfo.viewBox}, ${elementInfo.height / elementInfo.viewBox}) translate(0,0) matrix(1,0,0,1,0,0)`"
|
||||||
</g>
|
>
|
||||||
</SvgWrapper>
|
<path
|
||||||
|
vector-effect="non-scaling-stroke"
|
||||||
|
stroke-linecap="butt"
|
||||||
|
stroke-miterlimit="8"
|
||||||
|
stroke-linejoin=""
|
||||||
|
:d="elementInfo.path"
|
||||||
|
:fill="elementInfo.gradient ? `url(#editabel-gradient-${elementInfo.id})` : elementInfo.fill"
|
||||||
|
:stroke="outlineColor"
|
||||||
|
:stroke-width="outlineWidth"
|
||||||
|
:stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'"
|
||||||
|
></path>
|
||||||
|
</g>
|
||||||
|
</SvgWrapper>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -120,7 +124,10 @@ export default defineComponent({
|
|||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.rotate-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.element-content {
|
.element-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -5,25 +5,29 @@
|
|||||||
top: elementInfo.top + 'px',
|
top: elementInfo.top + 'px',
|
||||||
left: elementInfo.left + 'px',
|
left: elementInfo.left + 'px',
|
||||||
width: elementInfo.width + 'px',
|
width: elementInfo.width + 'px',
|
||||||
transform: `rotate(${elementInfo.rotate}deg)`,
|
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="element-content"
|
class="rotate-wrapper"
|
||||||
:style="{
|
:style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
|
||||||
backgroundColor: elementInfo.fill,
|
|
||||||
opacity: elementInfo.opacity,
|
|
||||||
textShadow: shadowStyle,
|
|
||||||
lineHeight: elementInfo.lineHeight,
|
|
||||||
letterSpacing: (elementInfo.wordSpace || 0) + 'px',
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<ElementOutline
|
<div
|
||||||
:width="elementInfo.width"
|
class="element-content"
|
||||||
:height="elementInfo.height"
|
:style="{
|
||||||
:outline="elementInfo.outline"
|
backgroundColor: elementInfo.fill,
|
||||||
/>
|
opacity: elementInfo.opacity,
|
||||||
<div class="text ProseMirror-static" v-html="elementInfo.content"></div>
|
textShadow: shadowStyle,
|
||||||
|
lineHeight: elementInfo.lineHeight,
|
||||||
|
letterSpacing: (elementInfo.wordSpace || 0) + 'px',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<ElementOutline
|
||||||
|
:width="elementInfo.width"
|
||||||
|
:height="elementInfo.height"
|
||||||
|
:outline="elementInfo.outline"
|
||||||
|
/>
|
||||||
|
<div class="text ProseMirror-static" v-html="elementInfo.content"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -61,7 +65,10 @@ export default defineComponent({
|
|||||||
.base-element-text {
|
.base-element-text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
.rotate-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.element-content {
|
.element-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|||||||
@ -7,31 +7,35 @@
|
|||||||
top: elementInfo.top + 'px',
|
top: elementInfo.top + 'px',
|
||||||
left: elementInfo.left + 'px',
|
left: elementInfo.left + 'px',
|
||||||
width: elementInfo.width + 'px',
|
width: elementInfo.width + 'px',
|
||||||
transform: `rotate(${elementInfo.rotate}deg)`,
|
|
||||||
}"
|
}"
|
||||||
@mousedown="$event => handleSelectElement($event)"
|
@mousedown="$event => handleSelectElement($event)"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="element-content"
|
class="rotate-wrapper"
|
||||||
:style="{
|
:style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
|
||||||
backgroundColor: elementInfo.fill,
|
|
||||||
opacity: elementInfo.opacity,
|
|
||||||
textShadow: shadowStyle,
|
|
||||||
lineHeight: elementInfo.lineHeight,
|
|
||||||
letterSpacing: (elementInfo.wordSpace || 0) + 'px',
|
|
||||||
}"
|
|
||||||
v-contextmenu="contextmenus"
|
|
||||||
>
|
>
|
||||||
<ElementOutline
|
|
||||||
:width="elementInfo.width"
|
|
||||||
:height="elementInfo.height"
|
|
||||||
:outline="elementInfo.outline"
|
|
||||||
/>
|
|
||||||
<div
|
<div
|
||||||
class="text"
|
class="element-content"
|
||||||
ref="editorViewRef"
|
:style="{
|
||||||
@mousedown="$event => handleSelectElement($event, false)"
|
backgroundColor: elementInfo.fill,
|
||||||
></div>
|
opacity: elementInfo.opacity,
|
||||||
|
textShadow: shadowStyle,
|
||||||
|
lineHeight: elementInfo.lineHeight,
|
||||||
|
letterSpacing: (elementInfo.wordSpace || 0) + 'px',
|
||||||
|
}"
|
||||||
|
v-contextmenu="contextmenus"
|
||||||
|
>
|
||||||
|
<ElementOutline
|
||||||
|
:width="elementInfo.width"
|
||||||
|
:height="elementInfo.height"
|
||||||
|
:outline="elementInfo.outline"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="text"
|
||||||
|
ref="editorViewRef"
|
||||||
|
@mousedown="$event => handleSelectElement($event, false)"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -325,7 +329,10 @@ export default defineComponent({
|
|||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.rotate-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
.element-content {
|
.element-content {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user