MovableArea

Requires:

@ray-js/ray≥0.5.10

Description

MovableView’s movable-area container; must wrap MovableView, which must be a direct child.

Props

Property	Type	Required	Default	Description
`scaleArea`	boolean	No	false	When the nested movable-view enables pinch-to-zoom, set this to make the gesture effective over the entire movable-area

Examples

Basic usage

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' }}>Drag me</Text>
        </View>
      </MovableView>
    </MovableArea>
  );
}

Expand the zoomable area

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' }}>The entire area can be scaled</Text>
        </View>
      </MovableView>
    </MovableArea>
  );
}