fix: 旋转后的元素执行动画异常

2025-04-15 02:20:00 +08:00 · 2021-04-09 12:44:11 +08:00 · 2021-04-09 12:44:11 +08:00 · 5b9b117fcb
commit 5b9b117fcb
parent 48660ed8ec
6 changed files with 213 additions and 170 deletions
--- a/src/views/components/element/ImageElement/BaseImageElement.vue
+++ b/src/views/components/element/ImageElement/BaseImageElement.vue
@ -9,28 +9,33 @@
      transform: `rotate(${elementInfo.rotate}deg)`,
    }"
  >
-    <div 
-      class="element-content"
-      :style="{
-        filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
-        transform: flipStyle,
-      }"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
    >
-      <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 }">
-        <img 
-          :src="elementInfo.src" 
-          :draggable="false" 
-          :style="{
-            top: imgPosition.top,
-            left: imgPosition.left,
-            width: imgPosition.width,
-            height: imgPosition.height,
-            filter: filter,
-          }" 
-          alt=""
-        />
+        <div class="image-content" :style="{ clipPath: clipShape.style }">
+          <img 
+            :src="elementInfo.src" 
+            :draggable="false" 
+            :style="{
+              top: imgPosition.top,
+              left: imgPosition.left,
+              width: imgPosition.width,
+              height: imgPosition.height,
+              filter: filter,
+            }" 
+            alt=""
+          />
+        </div>
      </div>
    </div>
  </div>
@ -85,7 +90,10 @@ export default defineComponent({
 .base-element-image {
  position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
  width: 100%;
  height: 100%;
--- a/src/views/components/element/ImageElement/index.vue
+++ b/src/views/components/element/ImageElement/index.vue
@ -7,46 +7,50 @@
      left: elementInfo.left + 'px',
      width: elementInfo.width + 'px',
      height: elementInfo.height + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
    }"
    @mousedown="$event => handleSelectElement($event)" 
  >
-    <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,
-      }"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
    >
-      <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 }">
-        <img 
-          :src="elementInfo.src" 
-          :draggable="false" 
-          :style="{
-            top: imgPosition.top,
-            left: imgPosition.left,
-            width: imgPosition.width,
-            height: imgPosition.height,
-            filter: filter,
-          }" 
-          @dragstart.prevent
-          alt=""
-        />
+        <div class="image-content" :style="{ clipPath: clipShape.style }">
+          <img 
+            :src="elementInfo.src" 
+            :draggable="false" 
+            :style="{
+              top: imgPosition.top,
+              left: imgPosition.left,
+              width: imgPosition.width,
+              height: imgPosition.height,
+              filter: filter,
+            }" 
+            @dragstart.prevent
+            alt=""
+          />
+        </div>
      </div>
    </div>
  </div>
@ -149,7 +153,10 @@ export default defineComponent({
    cursor: default;
  }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
  width: 100%;
  height: 100%;
--- a/src/views/components/element/ShapeElement/BaseShapeElement.vue
+++ b/src/views/components/element/ShapeElement/BaseShapeElement.vue
@ -6,47 +6,51 @@
      left: elementInfo.left + 'px',
      width: elementInfo.width + 'px',
      height: elementInfo.height + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
    }"
  >
-    <div 
-      class="element-content"
-      :style="{
-        opacity: elementInfo.opacity,
-        filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
-        transform: flipStyle,
-      }"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
    >
-      <SvgWrapper 
-        overflow="visible" 
-        :width="elementInfo.width"
-        :height="elementInfo.height"
+      <div 
+        class="element-content"
+        :style="{
+          opacity: elementInfo.opacity,
+          filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
+          transform: flipStyle,
+        }"
      >
-        <defs v-if="elementInfo.gradient">
-          <GradientDefs
-            :id="`base-gradient-${elementInfo.id}`" 
-            :type="elementInfo.gradient.type"
-            :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)`"
+        <SvgWrapper 
+          overflow="visible" 
+          :width="elementInfo.width"
+          :height="elementInfo.height"
        >
-          <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>
+          <defs v-if="elementInfo.gradient">
+            <GradientDefs
+              :id="`base-gradient-${elementInfo.id}`" 
+              :type="elementInfo.gradient.type"
+              :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 
+              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>
 </template>
@ -96,7 +100,10 @@ export default defineComponent({
 .base-element-shape {
  position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
  width: 100%;
  height: 100%;
--- a/src/views/components/element/ShapeElement/index.vue
+++ b/src/views/components/element/ShapeElement/index.vue
@ -7,49 +7,53 @@
      left: elementInfo.left + 'px',
      width: elementInfo.width + 'px',
      height: elementInfo.height + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
    }"
    @mousedown="$event => handleSelectElement($event)"
  >
-    <div 
-      class="element-content" 
-      v-contextmenu="contextmenus"
-      :style="{
-        opacity: elementInfo.opacity,
-        filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
-        transform: flipStyle,
-      }"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
    >
-      <SvgWrapper 
-        overflow="visible" 
-        :width="elementInfo.width"
-        :height="elementInfo.height"
+      <div 
+        class="element-content" 
+        v-contextmenu="contextmenus"
+        :style="{
+          opacity: elementInfo.opacity,
+          filter: shadowStyle ? `drop-shadow(${shadowStyle})` : '',
+          transform: flipStyle,
+        }"
      >
-        <defs v-if="elementInfo.gradient">
-          <GradientDefs
-            :id="`editabel-gradient-${elementInfo.id}`" 
-            :type="elementInfo.gradient.type"
-            :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)`"
+        <SvgWrapper 
+          overflow="visible" 
+          :width="elementInfo.width"
+          :height="elementInfo.height"
        >
-          <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>
+          <defs v-if="elementInfo.gradient">
+            <GradientDefs
+              :id="`editabel-gradient-${elementInfo.id}`" 
+              :type="elementInfo.gradient.type"
+              :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 
+              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>
 </template>
@ -120,7 +124,10 @@ export default defineComponent({
    cursor: default;
  }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
  width: 100%;
  height: 100%;
--- a/src/views/components/element/TextElement/BaseTextElement.vue
+++ b/src/views/components/element/TextElement/BaseTextElement.vue
@ -5,25 +5,29 @@
      top: elementInfo.top + 'px',
      left: elementInfo.left + 'px',
      width: elementInfo.width + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
    }"
  >
-    <div 
-      class="element-content"
-      :style="{
-        backgroundColor: elementInfo.fill,
-        opacity: elementInfo.opacity,
-        textShadow: shadowStyle,
-        lineHeight: elementInfo.lineHeight,
-        letterSpacing: (elementInfo.wordSpace || 0) + 'px',
-      }"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
    >
-      <ElementOutline
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :outline="elementInfo.outline"
-      />
-      <div class="text ProseMirror-static" v-html="elementInfo.content"></div>
+      <div 
+        class="element-content"
+        :style="{
+          backgroundColor: elementInfo.fill,
+          opacity: elementInfo.opacity,
+          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>
 </template>
@ -61,7 +65,10 @@ export default defineComponent({
 .base-element-text {
  position: absolute;
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
  position: relative;
  padding: 10px;
--- a/src/views/components/element/TextElement/index.vue
+++ b/src/views/components/element/TextElement/index.vue
@ -7,31 +7,35 @@
      top: elementInfo.top + 'px',
      left: elementInfo.left + 'px',
      width: elementInfo.width + 'px',
-      transform: `rotate(${elementInfo.rotate}deg)`,
    }"
    @mousedown="$event => handleSelectElement($event)"
  >
-    <div 
-      class="element-content"
-      :style="{
-        backgroundColor: elementInfo.fill,
-        opacity: elementInfo.opacity,
-        textShadow: shadowStyle,
-        lineHeight: elementInfo.lineHeight,
-        letterSpacing: (elementInfo.wordSpace || 0) + 'px',
-      }"
-      v-contextmenu="contextmenus"
+    <div
+      class="rotate-wrapper"
+      :style="{ transform: `rotate(${elementInfo.rotate}deg)` }"
    >
-      <ElementOutline
-        :width="elementInfo.width"
-        :height="elementInfo.height"
-        :outline="elementInfo.outline"
-      />
      <div 
-        class="text"
-        ref="editorViewRef"
-        @mousedown="$event => handleSelectElement($event, false)"
-      ></div>
+        class="element-content"
+        :style="{
+          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 
+          class="text"
+          ref="editorViewRef"
+          @mousedown="$event => handleSelectElement($event, false)"
+        ></div>
+      </div>
    </div>
  </div>
 </template>
@ -325,7 +329,10 @@ export default defineComponent({
    cursor: default;
  }
 }
-
+.rotate-wrapper {
+  width: 100%;
+  height: 100%;
+}
 .element-content {
  position: relative;
  padding: 10px;