React Native Expo实现图片触摸擦除（像素透明）功能方案问询

你已经通过PanResponder拿到了触摸坐标，接下来核心是把图片转为可编辑的像素画布，实时修改触摸区域的像素透明度。下面是具体实现方案：

一、替换图片组件为Canvas（核心改动） #

Expo的Image组件（包括Card.Cover）无法直接修改像素，需要用expo-canvas将图片渲染到画布上，这样就能直接操作像素：

1. 先安装依赖：

npx expo install expo-canvas

2. 重构组件代码，用Canvas替代Card.Cover：

import { useRef, useState } from 'react';
import { Canvas, Image as CanvasImage } from 'expo-canvas';
import { Card } from '@react-native-material/core';

export default function EraseImageScreen({ photoUrl }) {
  const canvasRef = useRef(null);
  const [drawParams, setDrawParams] = useState(null); // 保存图片绘制的位置/尺寸参数

  const handleCanvasReady = async (canvas) => {
    const ctx = canvas.getContext('2d');
    // 创建Canvas图片对象并加载远程图片
    const canvasImage = new CanvasImage(canvas);
    canvasImage.src = photoUrl;
    
    canvasImage.onload = () => {
      // 按contain模式计算图片绘制的位置和尺寸
      const canvasWidth = canvas.width;
      const canvasHeight = canvas.height;
      const imgRatio = canvasImage.width / canvasImage.height;
      const canvasRatio = canvasWidth / canvasHeight;
      
      let drawWidth, drawHeight, offsetX, offsetY;
      if (imgRatio > canvasRatio) {
        drawWidth = canvasWidth;
        drawHeight = canvasWidth / imgRatio;
        offsetX = 0;
        offsetY = (canvasHeight - drawHeight) / 2;
      } else {
        drawHeight = canvasHeight;
        drawWidth = canvasHeight * imgRatio;
        offsetX = (canvasWidth - drawWidth) / 2;
        offsetY = 0;
      }
      // 绘制图片到Canvas
      ctx.drawImage(canvasImage, offsetX, offsetY, drawWidth, drawHeight);
      // 保存参数用于后续坐标转换
      setDrawParams({ 
        offsetX, offsetY, drawWidth, drawHeight, 
        imgWidth: canvasImage.width, imgHeight: canvasImage.height 
      });
    };
  };

  const handleTouchMove = (e) => {
    if (!canvasRef.current || !drawParams) return;
    const ctx = canvasRef.current.getContext('2d');
    const { nativeEvent } = e;
    // 获取屏幕触摸坐标
    const screenX = nativeEvent.locationX;
    const screenY = nativeEvent.locationY;
    
    // 转换为图片实际像素坐标（适配contain模式的偏移）
    const { offsetX, offsetY, drawWidth, drawHeight, imgWidth, imgHeight } = drawParams;
    const imgX = ((screenX - offsetX) / drawWidth) * imgWidth;
    const imgY = ((screenY - offsetY) / drawHeight) * imgHeight;
    
    // 绘制透明圆形实现擦除效果
    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
    ctx.arc(imgX, imgY, 20, 0, 2 * Math.PI); // 20为擦除半径，可按需调整
    ctx.fill();
  };

  return (
    <Card style={{ width: '100%', height: 400 }}>
      <Canvas
        ref={canvasRef}
        style={{ width: '100%', height: '100%' }}
        onReady={handleCanvasReady}
        onTouchMove={handleTouchMove}
      />
    </Card>
  );
}

二、关键逻辑说明 #

• 坐标转换：因为图片用了contain模式，屏幕触摸坐标需要先转换为Canvas上图片的实际像素位置，避免擦除区域偏移。
• globalCompositeOperation：设置为destination-out可以让绘制区域直接变为透明，比逐个修改像素数组更高效，适合实时拖动场景。
• 性能优化：如果需要更细腻的像素级修改，可以用getImageData获取像素数组、修改透明度后再用putImageData回写，但实时拖动时建议用绘制形状的方式，避免性能卡顿。

三、替代方案（非实时场景） #

如果不需要实时拖动擦除，也可以用expo-image-manipulator保存每次擦除的区域，每次触摸后生成新的图片，但这种方式实时性差，仅适合批量修改场景。

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