Visual StudioとGTKなしのウィンドウでkonvaを使うには

Question

VSとGTKはkonvaが必要とするノードキャンバスを作成するために必要なようです。

私は完全な初心者だので、私を許して、私は何か他のものに使用することは決してないだろう巨大な物事の束をダウンロードしてインストールすることなく、これを行うための他の方法はありますか？ほとんどのブラウザがネイティブにHTML5キャンバスをネイティブにサポートしているので、プロセス全体が私には馬鹿げているようです。

Answer 1

が、私は答えを見つけて、それは私が一週間のためにそれを逃したことは非常に簡単です！

ちょうどnode-canvasをインストールせずに、npm install konva react-konva --save-devを行います。私はこの

import {Layer, Rect, Stage, Group} from 'react-konva'; 

のように私のコンポーネントファイルの先頭にkonvaをインポートしかし、DOMが作成される前に、これがロードされているので、WebPACKのは

になった「キャンバス」を、解決することができませんでした前

Could not resolve module 'canvas' 

例外。

私はそれがcomponentDidMountのいずれかにこれを下に移動して作業したり、renderメソッドを作っ：

render() { 
    const {Layer, Rect, Stage, Group} = require('react-konva'); 
    return (
     <div ref="containerDOM"> 
     <Stage width={700} height={700}> 
      <Layer> 
      <Rect 
       width="50" 
       height="50" 
       fill="green" 
      /> 
      </Layer> 
     </Stage> 
     </div> 
    ); 
} 

Answer 2

NodeJS環境でKonvaを使用できます。その場合はnode-canvasが必要です。だから、中のすべての依存関係をインストールする必要があります。

をおそらくあなたはNodeJSを必要としません。ブラウザー環境を使用できます。その場合、node-canvasは必要ありません。 DEMO