Question

我正在尝试根据 react-native-canvas 中使用的示例代码编写一个功能组件。

export default class App extends Component {

handleImageRect(canvas) {

  const image = new CanvasImage(canvas);
  canvas.width = 100;
  canvas.height = 100;

  const context = canvas.getContext('2d');

  image.src = 'https://image.freepik.com/free-vector/unicorn-background-design_1324-79.jpg';
  image.addEventListener('load', () => {
    context.drawImage(image, 0, 0, 100, 100);
  });

}
render() {
}

return (
  <View style={styles.container}>

     etc.

我不明白 handleImageRect() 方法的画布参数从何而来。当我尝试将其编写为功能组件时，它给了我一个错误提示： null 不是对象（评估 'canvas.getContext'）。

export default function Main() {

function handleImageRect(canvas) {

  const image = new CanvasImage(canvas);
  canvas.width = 100;
  canvas.height = 100;

  const context = canvas.getContext('2d');

  image.src = 'https://image.freepik.com/free-vector/unicorn-background-design_1324-79.jpg'; 
  image.addEventListener('load', () => {
  context.drawImage(image, 0, 0, 100, 100);

});

我猜画布在某种程度上是班级独有的？但我真的不知道。我检查了导入的模块，它也没有定义画布。

你能解释一下它是什么或更重要的是我是否以及如何在功能组件中使用它。非常感谢

将类组件反应为 react-native-canvas 的功能组件

0 个答案: