MovableArea

版本要求:

@ray-js/ray≥0.5.10

描述

MovableView 的可移动区域容器；须包裹 MovableView，且后者须为直接子节点。

属性

属性	类型	必填	默认值	说明
`scaleArea`	boolean	否	false	当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area

示例代码

基础用法

import React from 'react';
import { MovableArea, MovableView, View, Text } from '@ray-js/ray';

export default function BasicMovableArea() {
  return (
    <MovableArea
      style={{
        width: '300rpx',
        height: '300rpx',
        backgroundColor: '#f0f0f0',
        overflow: 'hidden',
      }}
    >
      <MovableView direction="all" x={0} y={0}>
        <View
          style={{
            width: '100rpx',
            height: '100rpx',
            backgroundColor: '#1890ff',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={{ color: '#fff' }}>拖我</Text>
        </View>
      </MovableView>
    </MovableArea>
  );
}

缩放区域扩展

import React from 'react';
import { MovableArea, MovableView, View, Text } from '@ray-js/ray';

export default function ScaleAreaDemo() {
  return (
    <MovableArea
      scaleArea
      style={{
        width: '400rpx',
        height: '400rpx',
        backgroundColor: '#f5f5f5',
        overflow: 'hidden',
      }}
    >
      <MovableView
        direction="all"
        scale
        scaleMin={0.5}
        scaleMax={3}
        scaleValue={1}
      >
        <View
          style={{
            width: '150rpx',
            height: '150rpx',
            backgroundColor: '#722ed1',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={{ color: '#fff' }}>整个区域可缩放</Text>
        </View>
      </MovableView>
    </MovableArea>
  );
}