私は自分のWebサイトでKineticJSライブラリを使用して、作成しているHTML5キャンバスゲームにいくつかの機能を追加しています。
ライブラリを使用してキャンバスに多数の画像を描画していますが、期待どおりに画像を描画していません。
私が描いている画像はすべて配列に保存されており、現在はすべてキャンバスに描画されています。ただし、それらはすべて同じ場所で互いに重なり合って描画されています。ユーザーはキャンバスの周りに画像をドラッグアンドドロップできるため、理論的にはこれで問題ありません。そうすることで、すべての画像を表示できるようになります。ただし、キャンバスに約30枚の画像を描画しているため、特にユーザーフレンドリーではありません。したがって、すべてを同時に表示できるようにするために、ユーザーがすべてを個別に移動する必要がある場合は、特に役に立ちません。
提供された機能に1つか2つの変更を加えたかったので、ローカルに保存したバージョンのKineticJSライブラリを使用しています。
画像の描画に使用しているライブラリの関数は次のようになります。
drawImage: function() {
var context = arguments[0];
context.save();
var a = Array.prototype.slice.call(arguments);
if(a.length === 6 || a.length === 10) {
if(a.length === 6) {
context.drawImage(a[1], a[2], a[3], a[4], a[5]);
}
else {
context.drawImage(a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9]);
}
}
context.restore();
}
この関数は、すべての画像を同じ場所（キャンバスの左上隅）に重ねて描画します。
この関数を編集して、配列内の画像が描画される場所の「グリッド」を作成したいと思います。同じグリッドセルに複数の画像が描画されているかどうかは関係ありませんが、少なくとも複数の場所に画像があります。
自分で作成した関数を使用してこれを実行しようとしました。関数を単独で使用すると機能しましたが、ライブラリと一緒に使用しようとすると機能しませんでした。そのため、ライブラリ内のdrawImage関数を編集して、画像を描画するための「グリッド」レイアウトを作成するために作成したコードを含めることができるかどうか疑問に思いました。
グリッドレイアウトで画像を描画するために作成した関数は、次のようになります。
function drawImage(imageObj) {
/* Create variables to select the array position randomly*/
var randomXPosition = function getRandomXPosition(minX, maxX){
return Math.floor(Math.random()*(maxX - minX +1)) +minX;
}
var randomYPosition = function getRandomYPosition(minY, maxY){
return Math.floor(Math.random()*(maxY - minY +1)) +minY;
}
/* Create arrays of X & Y coordinates, and select the array elements randomly for use as
coordinates at which to draw the images*/
var xPos = new Array();
xPos[0] = 10;
xPos[1] = 70;
xPos[2] = 130;
xPos[3] = 190;
xPos[4] = 250;
xPos[5] = 310;
xPos[6] = 370;
xPos[7] = 430;
xPos[8] = 490;
xPos[9] = 550;
xPos[10] = 610;
xPos[11] = 670;
xPos[12] = 730;
xPos[13] = 790;
xPos[14] = 850;
xPos[15] = 910;
var yPos = new Array();
yPos[0] = 40;
yPos[1] = 100;
yPos[2] = 160;
yPos[3] = 220;
yPos[4] = 280;
yPos[5] = 340;
yPos[6] = 400;
yPos[7] = 460;
var canvasImage = new Kinetic.Image({
image: imageObj,
width: 50,
height: 50,
/* Now select a random X & Y position from the arrays to draw the images to */
x: xPos[randomXPosition()],
y: yPos[randomYPosition()],
draggable: true
/* puts the images in random locations on the canvas
x: stage.getWidth() / 20*Math.floor(Math.random()*20),
y: stage.getHeight() / 15*Math.floor(Math.random()*8+2),
draggable: true */
});
// add cursor styling
canvasImage.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
canvasImage.on('mouseout', function() {
document.body.style.cursor = 'default';
});
imagesLayer.add(canvasImage);
}
この関数は、X位置とY位置を使用してキャンバス座標のグリッドレイアウトを作成し、X座標配列とY座標配列からランダムな要素をキャンバスに描画するときに、各画像のX値とY値に割り当てます。これにより、各画像が確実に描画されます。私が決定した可能な場所のリスト内のランダムな場所のキャンバス上。
私が知りたいのは、私が書いた関数が提供するdrawImage機能をライブラリ内の関数に追加する方法です。
コードをコピーしてライブラリの関数に貼り付けてみました。たとえば、次のようになります。
drawImage: function() {
var context = arguments[0];
context.save();
var a = Array.prototype.slice.call(arguments);
if(a.length === 6 || a.length === 10) {
if(a.length === 6) {
context.drawImage(a[1], a[2], a[3], a[4], a[5]);
}
else {
context.drawImage(a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9]);
}
}
/* Create variables to select the array position randomly*/
var randomXPosition = function getRandomXPosition(minX, maxX){
return Math.floor(Math.random()*(maxX - minX +1)) +minX;
}
var randomYPosition = function getRandomYPosition(minY, maxY){
return Math.floor(Math.random()*(maxY - minY +1)) +minY;
}
/* Create arrays of X & Y coordinates, and select the array elements randomly for use as
coordinates at which to draw the images*/
var xPos = new Array();
xPos[0] = 10;
xPos[1] = 70;
xPos[2] = 130;
xPos[3] = 190;
xPos[4] = 250;
xPos[5] = 310;
xPos[6] = 370;
xPos[7] = 430;
xPos[8] = 490;
xPos[9] = 550;
xPos[10] = 610;
xPos[11] = 670;
xPos[12] = 730;
xPos[13] = 790;
xPos[14] = 850;
xPos[15] = 910;
var yPos = new Array();
yPos[0] = 40;
yPos[1] = 100;
yPos[2] = 160;
yPos[3] = 220;
yPos[4] = 280;
yPos[5] = 340;
yPos[6] = 400;
yPos[7] = 460;
var canvasImage = new Kinetic.Image({
image: imageObj,
width: 50,
height: 50,
/* Now select a random X & Y position from the arrays to draw the images to */
x: xPos[randomXPosition()],
y: yPos[randomYPosition()],
draggable: true
/* puts the images in random locations on the canvas
x: stage.getWidth() / 20*Math.floor(Math.random()*20),
y: stage.getHeight() / 15*Math.floor(Math.random()*8+2),
draggable: true */
});
// add cursor styling
canvasImage.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
canvasImage.on('mouseout', function() {
document.body.style.cursor = 'default';
});
imagesLayer.add(canvasImage);
context.restore();
}
しかし、これを行った後にブラウザでページを表示すると、キャンバスがページに表示されなくなり、行に「ReferenceError：imageObjisnotdefined」というコンソールエラーが表示されますimage: imageObj,。
これがなぜなのか、どうやって修正するのかわかりません。誰か提案はありますか？
2013年1月30日16:10編集
提案されたようにコードを編集しようとしましたが、drawImage関数は次のようになります。
drawImage: function() {
var context = arguments[0];
context.save();
var a = Array.prototype.slice.call(arguments);
/*Create the arrays to hold the grid coordinates I want to use */
/* Create variables to select the array position randomly*/
var randomXPosition = function getRandomXPosition(minX, maxX){
return Math.floor(Math.random()*(maxX - minX +1)) +minX;
}
var randomYPosition = function getRandomYPosition(minY, maxY){
return Math.floor(Math.random()*(maxY - minY +1)) +minY;
}
/* Create arrays of X & Y coordinates, and select the array elements randomly for use as
coordinates at which to draw the images*/
var xPos = new Array();
xPos[0] = 10;
xPos[1] = 70;
xPos[2] = 130;
xPos[3] = 190;
xPos[4] = 250;
xPos[5] = 310;
xPos[6] = 370;
xPos[7] = 430;
xPos[8] = 490;
xPos[9] = 550;
xPos[10] = 610;
xPos[11] = 670;
xPos[12] = 730;
xPos[13] = 790;
xPos[14] = 850;
xPos[15] = 910;
var yPos = new Array();
yPos[0] = 40;
yPos[1] = 100;
yPos[2] = 160;
yPos[3] = 220;
yPos[4] = 280;
yPos[5] = 340;
yPos[6] = 400;
yPos[7] = 460;
var canvasImage = new Kinetic.Image({
image: a[1],
width: 50,
height: 50,
x: xPos[randomXPosition()],
y: yPos[randomYPosition()],
draggable: true
});
canvasImage.on('mouseover', function(){/*Define any handlers I want*/});
imagesLayer.add(canvasImage);
}
ただし、キャンバスは表示されていますが、画像は表示されていません。以前に画像が表示されていた場所に正方形の「アウトライン」があります（すべてが1つの場所に描画されていた場合）。したがって、これが画像だと思いますが、画像として表示されない-単なる正方形であり、それらはすべて同じ場所にあります。
キャンバスの周りに正方形をドラッグアンドドロップしようとすると（それが画像であると仮定して）、キャンバスに描画された他のすべてが画像とともに移動し、すべてが非常に遅くなり、応答しなくなります。
たとえば、これが私のページのスクリーンショットです。
コードの編集方法に問題がありますか？