ホーム > ブログ > createjs jsonでパスなどを読み込んで画像を配置

Webデザイナー ブログ

createjs jsonでパスなどを読み込んで画像を配置

2018年11月22日(Createjs)

<html>
<head>
<meta charset=”utf-8″ />
<script src=”https://code.createjs.com/1.0.0/createjs.min.js”></script>
<script type=”text/javascript” src=”data.json”></script>
<script>
window.addEventListener(“load”, init);

function init() {
var mydata = JSON.parse(data);
console.log(mydata);

// Stageオブジェクトを作成します
var stage = new createjs.Stage(“myCanvas”);
var preload = new createjs.LoadQueue();
var bitmap;
var result;

Object.keys(mydata).forEach(function (key) {
preload.loadFile(mydata[key].id+”.png”);
});

preload.addEventListener(‘fileload’, handleFileComplete);

var c = 0;
function handleFileComplete(event){
console.log(mydata.x);
result = event.result;
// Bitmapオブジェクトを生成する
bitmap = new createjs.Bitmap(result);
bitmap.scale= .1;
bitmap.x = mydata.x/2;
bitmap.y = mydata.y/2;

// StageにBitmapオブジェクトを追加する
stage.addChild(bitmap);
stage.update();
c++;
}

}
</script>
</head>
<body>
<canvas id=”myCanvas” width=”640″ height=”320″></canvas>
</body>
</html>

 

■json

data = `[
{
“id”:”hoge”,
“x”:851,
“y”:466
},
{
“id”:”hoge1″,
“x”:548,
“y”:424
},
{
“id”:”hoge2″,
“x”:204,
“y”:524
}
]`;

人気ブログランキングへ
応援お願いします!

コメントをどうぞ