为啥我无法在我的 React 应用程序中访问 Konva Canvas 属性？

Posted 2023-03-25

【中文标题】为啥我无法在我的 React 应用程序中访问 Konva Canvas 属性？

【英文标题】：Why can't I access Konva Canvas properties in my React app?为什么我无法在我的 React 应用程序中访问 Konva Canvas 属性？

【发布时间】：2020-09-01 11:30:46

【问题描述】：

我正在使用带有 ReactJS 的 FabricJS 库。这里我想创建和使用 Konva.Canvas 构造方法。但是，我在访问 Konva Canvas 属性时遇到了问题。

如果我使用 canvas.add 方法，我会得到错误 canvas.add is not a function

const Konva = window.Konva;
class Canvas extends Component 
    state =
        canvas: null,
        width: null,
        height: null,
        layer: null,
    
    componentDidMount() 
        const canvas = new Konva.Canvas( 
            container: this.c,
            height:this.props.height,
            width:this.props.width
        );
        console.log(canvas);
        const layer = new Konva.Layer();
        this.setState(canvas,layer);
        // canvas.add(layer);
        layer.draw();
    

【问题讨论】：

是的。如果我使用 canvas.add 方法。它说 canvas.add 不是一个函数。我没有从实例中获取任何属性。我是

请将该信息添加到您的问题中。

你好，我犯了一个愚蠢的错误，使用 Canvas 而不是舞台。已经解决了。谢谢。艾舍伍德

很高兴听到。请提供并接受答案或删除您的问题，以免数百人停下来试图提供帮助。 :)

我已经替换了 const canvas= new Konva.Stage()

【参考方案1】：

替换

 const canvas = new Konva.Canvas( 
        container: this.c,
        height:this.props.height,
        width:this.props.width
    );

与

 const canvas = new Konva.Stage( 
        container: this.c,
        height:this.props.height,
        width:this.props.width
    );

Stage 支持 add 方法。更多信息https://konvajs.org/api/Konva.Stage.html#main