@mpxjs/webpack-plugin 2.10.6 → 2.10.7-beta.10

package/lib/runtime/components/react/dist/mpx-movable-view.jsx

@@ -7,13 +7,13 @@
  * ✘ damping
  * ✘ friction
  * ✔ disabled
- * ✘ scale
- * ✘ scale-min
- * ✘ scale-max
- * ✘ scale-value
+ * ✔ scale
+ * ✔ scale-min
+ * ✔ scale-max
+ * ✔ scale-value
  * ✔ animation
  * ✔ bindchange
- * ✘ bindscale
+ * ✔ bindscale
  * ✔ htouchmove
  * ✔ vtouchmove
  */
@@ -24,7 +24,7 @@ import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
 import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
-import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, withSpring } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, withSpring, withTiming } from 'react-native-reanimated';
 import { collectDataset, noop } from '@mpxjs/utils';
 const styles = StyleSheet.create({
     container: {
@@ -41,8 +41,8 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const hasLayoutRef = useRef(false);
     const propsRef = useRef({});
     propsRef.current = (props || {});
-    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend } = props;
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, scale = false, 'scale-min': scaleMin = 0.1, 'scale-max': scaleMax = 10, 'scale-value': scaleValue = 1, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindscale, bindchange, onLayout: propsOnLayout } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, styles.container, style), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const navigation = useNavigation();
     const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
     const prevWaitForHandlersRef = useRef(waitFor || []);
@@ -50,6 +50,8 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const { textStyle, innerStyle } = splitStyle(normalStyle);
     const offsetX = useSharedValue(x);
     const offsetY = useSharedValue(y);
+    const currentScale = useSharedValue(1);
+    const layoutValue = useSharedValue({});
     const startPosition = useSharedValue({
         x: 0,
         y: 0
@@ -62,6 +64,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const isFirstTouch = useSharedValue(true);
     const touchEvent = useSharedValue('');
     const initialViewPosition = useSharedValue({ x: x || 0, y: y || 0 });
+    const lastChangeTime = useSharedValue(0);
     const MovableAreaLayout = useContext(MovableAreaContext);
     const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
     const waitForHandlers = flatGesture(waitFor);
@@ -99,6 +102,47 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             layoutRef
         }, propsRef.current));
     }, []);
+    const handleTriggerScale = useCallback(({ x, y, scale }) => {
+        const { bindscale } = propsRef.current;
+        if (!bindscale)
+            return;
+        bindscale(getCustomEvent('scale', {}, {
+            detail: {
+                x,
+                y,
+                scale
+            },
+            layoutRef
+        }, propsRef.current));
+    }, []);
+    const checkBoundaryPosition = useCallback(({ positionX, positionY }) => {
+        'worklet';
+        let x = positionX;
+        let y = positionY;
+        // 计算边界限制
+        if (x > draggableXRange.value[1]) {
+            x = draggableXRange.value[1];
+        }
+        else if (x < draggableXRange.value[0]) {
+            x = draggableXRange.value[0];
+        }
+        if (y > draggableYRange.value[1]) {
+            y = draggableYRange.value[1];
+        }
+        else if (y < draggableYRange.value[0]) {
+            y = draggableYRange.value[0];
+        }
+        return { x, y };
+    }, []);
+    // 节流版本的 change 事件触发
+    const handleTriggerChangeThrottled = useCallback(({ x, y, type }) => {
+        'worklet';
+        const now = Date.now();
+        if (now - lastChangeTime.value >= changeThrottleTime) {
+            lastChangeTime.value = now;
+            runOnJS(handleTriggerChange)({ x, y, type });
+        }
+    }, [changeThrottleTime]);
     useEffect(() => {
         runOnUI(() => {
             if (offsetX.value !== x || offsetY.value !== y) {
@@ -119,7 +163,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                         })
                         : newY;
                 }
-                if (propsRef.current.bindchange) {
+                if (bindchange) {
                     runOnJS(handleTriggerChange)({
                         x: newX,
                         y: newY,
@@ -129,12 +173,193 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             }
         })();
     }, [x, y]);
-    useEffect(() => {
-        const { width, height } = layoutRef.current;
-        if (width && height) {
-            resetBoundaryAndCheck({ width, height });
+    // 提取通用的缩放边界计算函数
+    const calculateScaleBoundaryPosition = useCallback(({ currentOffsetX, currentOffsetY, newScale, width, height }) => {
+        'worklet';
+        const prevScale = currentScale.value;
+        // 计算元素当前中心点（在屏幕上的位置）
+        const currentCenterX = currentOffsetX + (width * prevScale) / 2;
+        const currentCenterY = currentOffsetY + (height * prevScale) / 2;
+        // 实现中心缩放：保持元素中心点不变
+        // 计算缩放后为了保持中心点不变需要的新offset位置
+        let newOffsetX = currentCenterX - (width * newScale) / 2;
+        let newOffsetY = currentCenterY - (height * newScale) / 2;
+        // 缩放过程中实时边界检测
+        // 计算新的边界范围
+        const top = (style.position === 'absolute' && style.top) || 0;
+        const left = (style.position === 'absolute' && style.left) || 0;
+        const scaledWidth = width * newScale;
+        const scaledHeight = height * newScale;
+        // 计算新缩放值下的边界限制
+        const maxOffsetY = MovableAreaLayout.height - scaledHeight - top;
+        const maxOffsetX = MovableAreaLayout.width - scaledWidth - left;
+        let xMin, xMax, yMin, yMax;
+        if (MovableAreaLayout.width < scaledWidth) {
+            xMin = maxOffsetX;
+            xMax = -left;
         }
+        else {
+            xMin = -left;
+            xMax = maxOffsetX < 0 ? -left : maxOffsetX;
+        }
+        if (MovableAreaLayout.height < scaledHeight) {
+            yMin = maxOffsetY;
+            yMax = -top;
+        }
+        else {
+            yMin = -top;
+            yMax = maxOffsetY < 0 ? -top : maxOffsetY;
+        }
+        // 应用边界限制
+        if (newOffsetX > xMax) {
+            newOffsetX = xMax;
+        }
+        else if (newOffsetX < xMin) {
+            newOffsetX = xMin;
+        }
+        if (newOffsetY > yMax) {
+            newOffsetY = yMax;
+        }
+        else if (newOffsetY < yMin) {
+            newOffsetY = yMin;
+        }
+        return { x: newOffsetX, y: newOffsetY };
+    }, [MovableAreaLayout.height, MovableAreaLayout.width, style.position, style.top, style.left]);
+    // 提取通用的缩放处理函数
+    const handleScaleUpdate = useCallback((scaleInfo) => {
+        'worklet';
+        if (disabled)
+            return;
+        // 判断缩放方向并计算新的缩放值
+        const isZoomingIn = scaleInfo.scale > 1;
+        const isZoomingOut = scaleInfo.scale < 1;
+        let newScale;
+        if (isZoomingIn) {
+            // 放大：增加缩放值
+            newScale = currentScale.value + (scaleInfo.scale - 1) * 0.5;
+        }
+        else if (isZoomingOut) {
+            // 缩小：减少缩放值
+            newScale = currentScale.value - (1 - scaleInfo.scale) * 0.5;
+        }
+        else {
+            // 没有缩放变化
+            newScale = currentScale.value;
+        }
+        // 限制缩放值在 scaleMin 和 scaleMax 之间
+        newScale = Math.max(scaleMin, Math.min(scaleMax, newScale));
+        // 只有当缩放值真正改变时才调整位置
+        if (Math.abs(newScale - currentScale.value) > 0.01) {
+            // 获取元素尺寸
+            const { width = 0, height = 0 } = layoutValue.value;
+            if (width > 0 && height > 0) {
+                // 使用通用的边界计算函数
+                const { x: newOffsetX, y: newOffsetY } = calculateScaleBoundaryPosition({
+                    currentOffsetX: offsetX.value,
+                    currentOffsetY: offsetY.value,
+                    newScale,
+                    width,
+                    height
+                });
+                offsetX.value = newOffsetX;
+                offsetY.value = newOffsetY;
+                // 更新缩放值
+                currentScale.value = newScale;
+            }
+        }
+        else {
+            currentScale.value = newScale;
+        }
+        if (bindscale) {
+            runOnJS(handleTriggerScale)({
+                x: offsetX.value,
+                y: offsetY.value,
+                scale: newScale
+            });
+        }
+    }, [disabled, scaleMin, scaleMax, bindscale, handleTriggerScale, calculateScaleBoundaryPosition, style.position, style.top, style.left, MovableAreaLayout.height, MovableAreaLayout.width]);
+    useEffect(() => {
+        runOnUI(() => {
+            if (currentScale.value !== scaleValue) {
+                // 限制缩放值在 scaleMin 和 scaleMax 之间
+                const clampedScale = Math.max(scaleMin, Math.min(scaleMax, scaleValue));
+                // 实现中心缩放的位置补偿
+                const { width = 0, height = 0 } = layoutValue.value;
+                if (width > 0 && height > 0) {
+                    // 使用通用的边界计算函数
+                    const { x: newOffsetX, y: newOffsetY } = calculateScaleBoundaryPosition({
+                        currentOffsetX: offsetX.value,
+                        currentOffsetY: offsetY.value,
+                        newScale: clampedScale,
+                        width,
+                        height
+                    });
+                    // 同时更新缩放值和位置
+                    if (animation) {
+                        currentScale.value = withTiming(clampedScale, {
+                            duration: 1000
+                        }, () => {
+                            handleRestBoundaryAndCheck();
+                        });
+                        offsetX.value = withTiming(newOffsetX, { duration: 1000 });
+                        offsetY.value = withTiming(newOffsetY, { duration: 1000 });
+                    }
+                    else {
+                        currentScale.value = clampedScale;
+                        offsetX.value = newOffsetX;
+                        offsetY.value = newOffsetY;
+                        handleRestBoundaryAndCheck();
+                    }
+                }
+                else {
+                    // 如果还没有尺寸信息，只更新缩放值
+                    if (animation) {
+                        currentScale.value = withTiming(clampedScale, {
+                            duration: 1000
+                        }, () => {
+                            handleRestBoundaryAndCheck();
+                        });
+                    }
+                    else {
+                        currentScale.value = clampedScale;
+                        handleRestBoundaryAndCheck();
+                    }
+                }
+                if (bindscale) {
+                    runOnJS(handleTriggerScale)({
+                        x: offsetX.value,
+                        y: offsetY.value,
+                        scale: clampedScale
+                    });
+                }
+            }
+        })();
+    }, [scaleValue, scaleMin, scaleMax, animation]);
+    useEffect(() => {
+        runOnUI(handleRestBoundaryAndCheck)();
     }, [MovableAreaLayout.height, MovableAreaLayout.width]);
+    // 生成唯一 ID
+    const viewId = useMemo(() => `movable-view-${Date.now()}-${Math.random()}`, []);
+    // 注册到 MovableArea（如果启用了 scale-area）
+    useEffect(() => {
+        if (MovableAreaLayout.scaleArea && MovableAreaLayout.registerMovableView && MovableAreaLayout.unregisterMovableView) {
+            const handleAreaScale = (scaleInfo) => {
+                'worklet';
+                handleScaleUpdate({ scale: scaleInfo.scale });
+            };
+            const handleAreaScaleEnd = () => {
+                'worklet';
+                handleRestBoundaryAndCheck();
+            };
+            MovableAreaLayout.registerMovableView?.(viewId, {
+                onScale: scale ? handleAreaScale : noop,
+                onScaleEnd: scale ? handleAreaScaleEnd : noop
+            });
+            return () => {
+                MovableAreaLayout.unregisterMovableView?.(viewId);
+            };
+        }
+    }, [MovableAreaLayout.scaleArea, viewId, scale, handleScaleUpdate]);
     const getTouchSource = useCallback((offsetX, offsetY) => {
         const hasOverBoundary = offsetX < draggableXRange.value[0] || offsetX > draggableXRange.value[1] ||
             offsetY < draggableYRange.value[0] || offsetY > draggableYRange.value[1];
@@ -159,61 +384,45 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         return source;
     }, []);
     const setBoundary = useCallback(({ width, height }) => {
+        'worklet';
         const top = (style.position === 'absolute' && style.top) || 0;
         const left = (style.position === 'absolute' && style.left) || 0;
-        const scaledWidth = width || 0;
-        const scaledHeight = height || 0;
-        const maxY = MovableAreaLayout.height - scaledHeight - top;
-        const maxX = MovableAreaLayout.width - scaledWidth - left;
+        // 使用左上角缩放，计算offset位置的边界范围
+        const currentScaleVal = currentScale.value;
+        const scaledWidth = (width || 0) * currentScaleVal;
+        const scaledHeight = (height || 0) * currentScaleVal;
+        // offset位置的边界：左上角可以移动的范围
+        const maxOffsetY = MovableAreaLayout.height - scaledHeight - top;
+        const maxOffsetX = MovableAreaLayout.width - scaledWidth - left;
         let xRange;
         let yRange;
         if (MovableAreaLayout.width < scaledWidth) {
-            xRange = [maxX, 0];
+            xRange = [maxOffsetX, -left];
         }
         else {
-            xRange = [left === 0 ? 0 : -left, maxX < 0 ? 0 : maxX];
+            xRange = [-left, maxOffsetX < 0 ? -left : maxOffsetX];
         }
         if (MovableAreaLayout.height < scaledHeight) {
-            yRange = [maxY, 0];
+            yRange = [maxOffsetY, -top];
         }
         else {
-            yRange = [top === 0 ? 0 : -top, maxY < 0 ? 0 : maxY];
+            yRange = [-top, maxOffsetY < 0 ? -top : maxOffsetY];
         }
         draggableXRange.value = xRange;
         draggableYRange.value = yRange;
     }, [MovableAreaLayout.height, MovableAreaLayout.width, style.position, style.top, style.left]);
-    const checkBoundaryPosition = useCallback(({ positionX, positionY }) => {
+    const resetBoundaryAndCheck = ({ width, height }) => {
         'worklet';
-        let x = positionX;
-        let y = positionY;
-        // 计算边界限制
-        if (x > draggableXRange.value[1]) {
-            x = draggableXRange.value[1];
-        }
-        else if (x < draggableXRange.value[0]) {
-            x = draggableXRange.value[0];
-        }
-        if (y > draggableYRange.value[1]) {
-            y = draggableYRange.value[1];
+        setBoundary({ width, height });
+        const positionX = offsetX.value;
+        const positionY = offsetY.value;
+        const { x: newX, y: newY } = checkBoundaryPosition({ positionX, positionY });
+        if (positionX !== newX) {
+            offsetX.value = newX;
         }
-        else if (y < draggableYRange.value[0]) {
-            y = draggableYRange.value[0];
+        if (positionY !== newY) {
+            offsetY.value = newY;
         }
-        return { x, y };
-    }, []);
-    const resetBoundaryAndCheck = ({ width, height }) => {
-        setBoundary({ width, height });
-        runOnUI(() => {
-            const positionX = offsetX.value;
-            const positionY = offsetY.value;
-            const { x: newX, y: newY } = checkBoundaryPosition({ positionX, positionY });
-            if (positionX !== newX) {
-                offsetX.value = newX;
-            }
-            if (positionY !== newY) {
-                offsetY.value = newY;
-            }
-        })();
     };
     const onLayout = (e) => {
         hasLayoutRef.current = true;
@@ -225,13 +434,18 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         nodeRef.current?.measure((x, y, width, height) => {
             const { y: navigationY = 0 } = navigation?.layout || {};
             layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft: 0, offsetTop: 0 };
-            resetBoundaryAndCheck({ width, height });
+            // 同时更新 layoutValue，供缩放逻辑使用
+            runOnUI(() => {
+                layoutValue.value = { width, height };
+                resetBoundaryAndCheck({ width: width, height: height });
+            })();
         });
-        props.onLayout && props.onLayout(e);
+        propsOnLayout && propsOnLayout(e);
     };
     const extendEvent = useCallback((e, type) => {
         const { y: navigationY = 0 } = navigation?.layout || {};
         const touchArr = [e.changedTouches, e.allTouches];
+        const currentProps = propsRef.current;
         touchArr.forEach(touches => {
             touches && touches.forEach((item) => {
                 item.pageX = item.absoluteX;
@@ -243,8 +457,8 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         Object.assign(e, {
             touches: type === 'end' ? [] : e.allTouches,
             currentTarget: {
-                id: props.id || '',
-                dataset: collectDataset(props),
+                id: currentProps.id || '',
+                dataset: collectDataset(currentProps),
                 offsetLeft: 0,
                 offsetTop: 0
             },
@@ -252,11 +466,13 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         });
     }, []);
     const triggerStartOnJS = ({ e }) => {
+        const { bindtouchstart, catchtouchstart } = propsRef.current;
         extendEvent(e, 'start');
         bindtouchstart && bindtouchstart(e);
         catchtouchstart && catchtouchstart(e);
     };
     const triggerMoveOnJS = ({ e, hasTouchmove, hasCatchTouchmove, touchEvent }) => {
+        const { bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove } = propsRef.current;
         extendEvent(e, 'move');
         if (hasTouchmove) {
             if (touchEvent === 'htouchmove') {
@@ -278,10 +494,18 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         }
     };
     const triggerEndOnJS = ({ e }) => {
+        const { bindtouchend, catchtouchend } = propsRef.current;
         extendEvent(e, 'end');
         bindtouchend && bindtouchend(e);
         catchtouchend && catchtouchend(e);
     };
+    const handleRestBoundaryAndCheck = () => {
+        'worklet';
+        const { width, height } = layoutValue.value;
+        if (width && height) {
+            resetBoundaryAndCheck({ width, height });
+        }
+    };
     const gesture = useMemo(() => {
         const handleTriggerMove = (e) => {
             'worklet';
@@ -297,6 +521,8 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             }
         };
         const gesturePan = Gesture.Pan()
+            .minPointers(1)
+            .maxPointers(1)
             .onTouchesDown((e) => {
             'worklet';
             const changedTouches = e.changedTouches[0] || { x: 0, y: 0 };
@@ -350,8 +576,9 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                     offsetY.value = newY;
                 }
             }
-            if (propsRef.current.bindchange) {
-                runOnJS(handleTriggerChange)({
+            if (bindchange) {
+                // 使用节流版本减少 runOnJS 调用
+                handleTriggerChangeThrottled({
                     x: offsetX.value,
                     y: offsetY.value
                 });
@@ -390,55 +617,58 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
                             })
                             : y;
                     }
-                    if (propsRef.current.bindchange) {
+                    if (bindchange) {
                         runOnJS(handleTriggerChange)({
                             x,
                             y
                         });
                     }
                 }
-                return;
-            }
-            // 惯性处理
-            if (direction === 'horizontal' || direction === 'all') {
-                xInertialMotion.value = true;
-                offsetX.value = withDecay({
-                    velocity: e.velocityX / 10,
-                    rubberBandEffect: outOfBounds,
-                    clamp: draggableXRange.value
-                }, () => {
-                    xInertialMotion.value = false;
-                    if (propsRef.current.bindchange) {
-                        runOnJS(handleTriggerChange)({
-                            x: offsetX.value,
-                            y: offsetY.value
-                        });
-                    }
-                });
             }
-            if (direction === 'vertical' || direction === 'all') {
-                yInertialMotion.value = true;
-                offsetY.value = withDecay({
-                    velocity: e.velocityY / 10,
-                    rubberBandEffect: outOfBounds,
-                    clamp: draggableYRange.value
-                }, () => {
-                    yInertialMotion.value = false;
-                    if (propsRef.current.bindchange) {
-                        runOnJS(handleTriggerChange)({
-                            x: offsetX.value,
-                            y: offsetY.value
-                        });
-                    }
-                });
+            else if (inertia) {
+                // 惯性处理
+                if (direction === 'horizontal' || direction === 'all') {
+                    xInertialMotion.value = true;
+                    offsetX.value = withDecay({
+                        velocity: e.velocityX / 10,
+                        rubberBandEffect: outOfBounds,
+                        clamp: draggableXRange.value
+                    }, () => {
+                        xInertialMotion.value = false;
+                        if (bindchange) {
+                            runOnJS(handleTriggerChange)({
+                                x: offsetX.value,
+                                y: offsetY.value
+                            });
+                        }
+                    });
+                }
+                if (direction === 'vertical' || direction === 'all') {
+                    yInertialMotion.value = true;
+                    offsetY.value = withDecay({
+                        velocity: e.velocityY / 10,
+                        rubberBandEffect: outOfBounds,
+                        clamp: draggableYRange.value
+                    }, () => {
+                        yInertialMotion.value = false;
+                        if (bindchange) {
+                            runOnJS(handleTriggerChange)({
+                                x: offsetX.value,
+                                y: offsetY.value
+                            });
+                        }
+                    });
+                }
             }
         })
             .withRef(movableGestureRef);
-        if (direction === 'horizontal') {
-            gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
-        }
-        else if (direction === 'vertical') {
-            gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+        if (!disableEventPassthrough) {
+            if (direction === 'horizontal') {
+                gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
+            }
+            else if (direction === 'vertical') {
+                gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+            }
         }
         if (simultaneousHandlers && simultaneousHandlers.length) {
             gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);
@@ -446,13 +676,43 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         if (waitForHandlers && waitForHandlers.length) {
             gesturePan.requireExternalGestureToFail(...waitForHandlers);
         }
+        // 添加缩放手势支持
+        if (scale && !MovableAreaLayout.scaleArea) {
+            const gesturePinch = Gesture.Pinch()
+                .onUpdate((e) => {
+                'worklet';
+                handleScaleUpdate({ scale: e.scale });
+            })
+                .onEnd((e) => {
+                'worklet';
+                if (disabled)
+                    return;
+                // 确保最终缩放值在有效范围内
+                const finalScale = Math.max(scaleMin, Math.min(scaleMax, currentScale.value));
+                if (finalScale !== currentScale.value) {
+                    currentScale.value = finalScale;
+                    if (bindscale) {
+                        runOnJS(handleTriggerScale)({
+                            x: offsetX.value,
+                            y: offsetY.value,
+                            scale: finalScale
+                        });
+                    }
+                }
+                // 缩放结束后重新检查边界
+                handleRestBoundaryAndCheck();
+            });
+            // 根据手指数量自动区分手势：一指移动，两指缩放
+            return Gesture.Exclusive(gesturePan, gesturePinch);
+        }
         return gesturePan;
-    }, [disabled, direction, inertia, outOfBounds, gestureSwitch.current]);
+    }, [disabled, direction, inertia, outOfBounds, scale, scaleMin, scaleMax, animation, gestureSwitch.current, handleScaleUpdate, MovableAreaLayout.scaleArea]);
     const animatedStyles = useAnimatedStyle(() => {
         return {
             transform: [
                 { translateX: offsetX.value },
-                { translateY: offsetY.value }
+                { translateY: offsetY.value },
+                { scale: currentScale.value }
             ]
         };
     });
@@ -489,7 +749,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const innerProps = useInnerProps(extendObject({}, filterProps, {
         ref: nodeRef,
         onLayout: onLayout,
-        style: [innerStyle, animatedStyles, layoutStyle]
+        style: [{ transformOrigin: 'top left' }, innerStyle, animatedStyles, layoutStyle]
     }, rewriteCatchEvent()));
     return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, innerProps, wrapChildren(props, {
         hasVarDec,

package/lib/runtime/components/react/dist/mpx-rich-text/index.jsx

@@ -56,6 +56,9 @@ const _RichText = forwardRef((props, ref) => {
         source: { html: generateHTML(html) },
         onMessage: (event) => {
             setWebViewHeight(+event.nativeEvent.data);
+        },
+        style: {
+            backgroundColor: 'transparent'
         }
     }));
     if (hasPositionFixed) {