|
@@ -12,7 +12,12 @@
|
|
|
<view class="cl-cropper__image">
|
|
<view class="cl-cropper__image">
|
|
|
<image
|
|
<image
|
|
|
class="cl-cropper__image-inner"
|
|
class="cl-cropper__image-inner"
|
|
|
- :class="[pt.image?.className]"
|
|
|
|
|
|
|
+ :class="[
|
|
|
|
|
+ {
|
|
|
|
|
+ 'no-dragging': !touch.isTouching
|
|
|
|
|
+ },
|
|
|
|
|
+ pt.image?.className
|
|
|
|
|
+ ]"
|
|
|
:src="imageUrl"
|
|
:src="imageUrl"
|
|
|
:style="imageStyle"
|
|
:style="imageStyle"
|
|
|
@load="onImageLoaded"
|
|
@load="onImageLoaded"
|
|
@@ -317,18 +322,23 @@ const imageStyle = computed(() => {
|
|
|
const flipX = flipHorizontal.value ? "scaleX(-1)" : "scaleX(1)";
|
|
const flipX = flipHorizontal.value ? "scaleX(-1)" : "scaleX(1)";
|
|
|
const flipY = flipVertical.value ? "scaleY(-1)" : "scaleY(1)";
|
|
const flipY = flipVertical.value ? "scaleY(-1)" : "scaleY(1)";
|
|
|
|
|
|
|
|
|
|
+ let height = toPixel(imageSize.height);
|
|
|
|
|
+ let width = toPixel(imageSize.width);
|
|
|
|
|
+
|
|
|
|
|
+ // 解决 ios 端高和宽为0时不触发 load 事件
|
|
|
|
|
+ if (height == 0) {
|
|
|
|
|
+ height = 1;
|
|
|
|
|
+ width = 1;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
// 创建基础样式对象
|
|
// 创建基础样式对象
|
|
|
const style = {
|
|
const style = {
|
|
|
transform: `translate(${toPixel(transform.translateX)}px, ${toPixel(transform.translateY)}px) ${flipX} ${flipY} rotate(${rotate.value}deg)`, // 设置图片位移和翻转变换
|
|
transform: `translate(${toPixel(transform.translateX)}px, ${toPixel(transform.translateY)}px) ${flipX} ${flipY} rotate(${rotate.value}deg)`, // 设置图片位移和翻转变换
|
|
|
- height: toPixel(imageSize.height) + "px", // 设置图片显示高度
|
|
|
|
|
- width: toPixel(imageSize.width) + "px" // 设置图片显示宽度
|
|
|
|
|
|
|
+ height: height + "px", // 设置图片显示高度
|
|
|
|
|
+ width: width + "px", // 设置图片显示宽度
|
|
|
|
|
+ opacity: height == 0 ? 0 : 1 // 设置图片显示透明度
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- // 如果不在触摸状态,添加过渡动画
|
|
|
|
|
- if (!touch.isTouching) {
|
|
|
|
|
- style["transitionDuration"] = "0.3s"; // 设置过渡动画时长
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
// 返回样式对象
|
|
// 返回样式对象
|
|
|
return style;
|
|
return style;
|
|
|
});
|
|
});
|
|
@@ -1192,7 +1202,17 @@ defineExpose({
|
|
|
z-index: 510;
|
|
z-index: 510;
|
|
|
|
|
|
|
|
&__image {
|
|
&__image {
|
|
|
- @apply absolute top-0 left-0 flex items-center justify-center w-full h-full pointer-events-none;
|
|
|
|
|
|
|
+ @apply absolute top-0 left-0 flex items-center justify-center w-full h-full;
|
|
|
|
|
+ @apply pointer-events-none;
|
|
|
|
|
+
|
|
|
|
|
+ &-inner {
|
|
|
|
|
+ @apply transition-none;
|
|
|
|
|
+
|
|
|
|
|
+ .no-dragging {
|
|
|
|
|
+ @apply duration-300;
|
|
|
|
|
+ transition-property: transform;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&__mask {
|
|
&__mask {
|