为React Native开发像素画绘制组件的技术咨询

一、光栅绘图的实现（替代SVG/路径） #

React Native原生没有内置光栅画布，但可以用react-native-skia实现像素级绘图——它支持直接操作像素或绘制小矩形模拟像素，完全满足像素画需求。

核心思路： #

用Skia的Canvas组件作为绘制表面，通过Rect绘制单个像素（设置宽高为自定义像素尺寸，比如10x10），或者直接操作PixelMap实现更底层的像素读写。

代码示例（基础像素绘制）： #

import { Canvas, Rect, useCanvasRef } from '@shopify/react-native-skia';
import { useState } from 'react';

export default function PixelCanvas() {
  const [pixels, setPixels] = useState([]); // 存储像素数据：{x, y, color}
  const canvasRef = useCanvasRef();

  const handleTouch = (event) => {
    // 先假设已完成坐标转换，得到画布相对坐标
    const canvasX = Math.floor(event.nativeEvent.locationX / 10);
    const canvasY = Math.floor(event.nativeEvent.locationY / 10);
    setPixels(prev => [...prev, { x: canvasX, y: canvasY, color: '#000' }]);
  };

  return (
    <Canvas
      ref={canvasRef}
      style={{ width: 400, height: 400 }}
      onTouchEnd={handleTouch}
    >
      {pixels.map((p, idx) => (
        <Rect
          key={idx}
          x={p.x * 10}
          y={p.y * 10}
          width={10}
          height={10}
          color={p.color}
        />
      ))}
    </Canvas>
  );
}

二、画布缩放与平移的手势处理 #

用react-native-gesture-handler的PinchGestureHandler和PanGestureHandler，配合react-native-reanimated实现流畅的缩放平移，同时处理坐标转换，确保触摸点能正确映射到画布原始位置。

坐标转换核心公式： #

// screenX/screenY：触摸点的屏幕坐标
// translateX/translateY：画布当前偏移量
// scale：画布当前缩放比例
const canvasX = (screenX - translateX.value) / scale.value;
const canvasY = (screenY - translateY.value) / scale.value;

完整手势+绘图示例： #

import { Canvas, Rect, useCanvasRef } from '@shopify/react-native-skia';
import { useState } from 'react';
import { PanGestureHandler, PinchGestureHandler } from 'react-native-gesture-handler';
import Animated, {
  useAnimatedGestureHandler,
  useSharedValue,
  useAnimatedStyle,
} from 'react-native-reanimated';

const AnimatedCanvas = Animated.createAnimatedComponent(Canvas);

export default function PixelCanvas() {
  const [pixels, setPixels] = useState([]);
  const canvasRef = useCanvasRef();
  
  // 画布变换参数
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
  const scale = useSharedValue(1);
  const lastScale = useSharedValue(1);

  // 平移手势处理
  const panHandler = useAnimatedGestureHandler({
    onActive: (event) => {
      translateX.value = event.translationX;
      translateY.value = event.translationY;
    },
  });

  // 缩放手势处理
  const pinchHandler = useAnimatedGestureHandler({
    onActive: (event) => {
      scale.value = lastScale.value * event.scale;
    },
    onEnd: () => {
      lastScale.value = scale.value;
    },
  });

  // 画布动画样式
  const canvasStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
      { scale: scale.value },
    ],
  }));

  const handleTouch = (event) => {
    // 转换屏幕坐标到画布原始坐标
    const screenX = event.nativeEvent.locationX;
    const screenY = event.nativeEvent.locationY;
    const canvasX = Math.floor((screenX - translateX.value) / scale.value / 10);
    const canvasY = Math.floor((screenY - translateY.value) / scale.value / 10);
    
    // 避免重复绘制同一像素（可选优化）
    const exists = pixels.some(p => p.x === canvasX && p.y === canvasY);
    if (!exists) {
      setPixels(prev => [...prev, { x: canvasX, y: canvasY, color: '#000' }]);
    }
  };

  return (
    <PinchGestureHandler onGestureEvent={pinchHandler}>
      <PanGestureHandler onGestureEvent={panHandler}>
        <AnimatedCanvas
          ref={canvasRef}
          style={[{ width: 400, height: 400 }, canvasStyle]}
          onTouchEnd={handleTouch}
        >
          {pixels.map((p, idx) => (
            <Rect
              key={idx}
              x={p.x * 10}
              y={p.y * 10}
              width={10}
              height={10}
              color={p.color}
            />
          ))}
        </AnimatedCanvas>
      </PanGestureHandler>
    </PinchGestureHandler>
  );
}

三、关键细节优化 #

• 像素尺寸灵活调整：示例中用10x10矩形代表单个像素，可根据需求修改尺寸，或直接使用PixelMap操作原始像素（适合高分辨率像素画）。
• 坐标取整：通过Math.floor确保触摸点映射到整数像素坐标，避免绘制半像素。
• 性能优化：当像素数量较多时，用Skia的Picture缓存绘制内容，减少重复渲染开销。

内容的提问来源于stack exchange，提问作者ShidoPixel