###createjsの画像表示のコードをreactに移植できない。
タイトル通りです。
エラー文が表示されないので、どこが間違っているのかすらわからずコードが長くなってしまいますがお許しください。
私は普通のhtmlで、以下のような簡単なコードを書きました。createjs
を使い、読み込んだ画像をcanvas
に描く動作をします。
これは動く事は確認済みです。
html
1<canvas id="myCanvas"></canvas> 2 3<script> 4 function init(){ 5 // ステージ作成 6 var stage = new createjs.Stage("myCanvas"); 7 //まずLoadQueueのインスタンス作成 8 var queue = new createjs.LoadQueue(false); 9 //LoadQueueの完了ハンドラ設定 10 queue.on("complete", handleComplete, this); 11 var manifest = [ 12 {"src":"./images/buill_base.png","id":"base"} 13 ]; 14 // manifestの読込み 15 queue.loadManifest(manifest,true); 16 function handleComplete(){ 17 var base = new createjs.Bitmap(queue.getResult("base")); 18 stage.addChild(base); 19 stage.update(); 20 } 21 }; 22 window.addEventListener('load', function(){ 23 init(); 24 }); 25</script>
しかしこのコードをreactに移植すると、なにも画像が表示されません。
以下が移植したコードです。
react
1export function Town() { 2 3 //window.addEventListener('load'・・・の代わりにuseEffectを初期化として使う。 4 useEffect(() => { 5 // ステージ作成 6 var stage = new createjs.Stage("myCanvas"); 7 //LoadQueue作成 8 var queue = new createjs.LoadQueue(false); 9 //LoadQueueの完了ハンドラ設定 10 queue.on("complete", handleComplete, this); 11 var manifest = [ 12 {"src": "../images/buill/buill_base.png", "id": "base"}//画像パスはreact用に変えている。 13 ]; 14 // manifestの読込 15 queue.loadManifest(manifest,true); 16 function handleComplete(){ 17 var base = new createjs.Bitmap(queue.getResult("base")); 18 stage.addChild(base); 19 stage.update(); 20 } 21 22 }, []); 23 24 return ( 25 <CustomCanvas id="myCanvas"></CustomCanvas> 26 ); 27}
これは何がいけなかったのでしょうか・・・
エラー文も表示されないので途方にくれています。
どうかアドバイスいただけたらありがたいです・・・
補足としてCustomCanvas
はcss修飾を施したcanvasです。
あなたの回答
tips
プレビュー