如何在沒有Visual Studio和GTK的Windows上使用konva

似乎VS和GTK只需要構建konva所需的node-canvas。如何在沒有Visual Studio和GTK的Windows上使用konva

原諒我，因爲我是一個完整的新手，但有沒有這樣做，而不必下載並安裝了一堆，我永遠不會爲別的用巨大的東西任何其他方式？整個過程對我來說似乎很愚蠢，因爲現在大多數瀏覽器本地支持HTML5畫布。

2016-07-04 hoangbv15

你可以看到說明這裏https://github.com/Automattic/node-canvas/打造節點帆布wiki /安裝--- Windows – hoangbv15

我找到了答案，這是很簡單的，我錯過了整整一個星期！

只是做一個npm install konva react-konva --save-dev，無需安裝node-canvas。

之前，我進口konva在我的組件文件這樣

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

開始，但在創建DOM在此之前加載，這樣的WebPack無法解析「畫布」，這就造成了

Could not resolve module 'canvas'

例外。

我把它通過移動下來要麼componentDidMount工作或渲染方法：

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> 
    ); 
}

來源

2016-07-08 21:18:01 hoangbv15

。這肯定在舊版本的webpack 1上。 –

@AhmedHashem抱歉，我不記得，因爲這是在一年前就使用的WebPack！反正，我找到了答案，非常感謝你的幫助lavrton！ – hoangbv15

您可以在NodeJS環境中使用Konva。對於這種情況，需要node-canvas。所以你必須安裝所有依賴關係。

也許你不需要NodeJS。您可以使用瀏覽器環境。對於這種情況，node-canvas不是必需的。 DEMO

來源

2016-07-05 01:31:35 lavrton

非常感謝@lavrton。我正在使用這個樣板文件[link]（https://www.reactstarterkit.com/）啓動一個React Redux web應用程序。它只使用npm和webpack來安裝和打包模塊（出於某種原因，很多反應樣板都喜歡這種方式）。在那種情況下，我做這件事的最好方法是什麼？我應該找到另一種使用涼亭的樣板嗎？ – hoangbv15

@ hoangbv15沒關係。你將在這裏使用node（和npm）來創建和安裝軟件包。您的代碼將在瀏覽器中運行。 – lavrton

是的，但問題是，konva.js然後在'require（'canvas'）'這一行爆發錯誤消息'Can not find module'canvas'「。我真的覺得最好是構建自己的webGL組件。 ... – hoangbv15

如何在沒有Visual Studio和GTK的Windows上使用konva

回答

相關問題