1

HTML5キャンバスの特定の場所に（つまり、「グリッド」タイプのレイアウトを使用して）描画したい画像の配列があります。

drawImage(imageObj)現在、配列内のすべての画像をキャンバス上のランダムな場所に描画するという関数があります。ただし、画像を描画する場所の設定数を事前に決定してから、これらの設定された場所のどれにランダムに描画する画像を選択できるようにしたいです（複数の画像を描画するかどうかは関係ありません）。同じ場所）。

私のdrawImage(imageObj)関数は現在次のようになっています：

function drawImage(imageObj) {
    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: 50,
      height: 50,



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

関数を少し変更して場所の「グリッド」を作成し、各画像をグリッド内のランダムな「セル」に描画してみました。

function drawImage(imageObj) {
    /* 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] = 10;
    yPos[1] = 70;
    yPos[2] = 130;
    yPos[3] = 190;
    yPos[4] = 250;
    yPos[5] = 310;
    yPos[6] = 370;
    yPos[7] = 430;

    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(getRandomXPosition),
      y: yPos(getRandomYPosition),
      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 */
    });

私はその線が

x: xPos(getRandomXPosition),
y: yPos(getRandomYPosition),

キャンバスに描画されている画像のx座標とy座標を、「グリッド」内のランダムな「セル」に設定します。これによりxPos、yPos配列のランダムな要素が、画像のx値とy値として設定されます。描かれる。

ただし、ブラウザでページを表示すると、「xPosは関数ではありません」というコンソールエラーが表示されます。

x: xPos(getRandomXPosition),

これがなぜなのか理解できません-誰かアイデアはありますか？私は私がライン上で同じエラーを抱えていると思います

y: yPos(getRandomYPosition),

同じ理由で。

xPosは関数ではなく、配列であり、位置'getRandomXPosition'にある配列要素を取得しようとしているだけです。

これは、「getRandomXPosition」自体がintではなく、関数であるためだと思いました。そのため、これらの関数定義行を次のように変更して、出力を変数に格納してみました。

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

次に、それらを使用していた場所を更新して、関数ではなくパラメーターとして変数を渡すようにしました。

x: xPos(randomXPosition),
y: yPos(randomYPosition),
draggable: true

ただし、ブラウザでページを表示すると、「xPosは関数ではありません」というコンソールエラーが表示されます。

x: xPos(randomXPosition),

なぜこれなのか理解できません-誰かが私を正しい方向に向けることができますか？また、kineticJSライブラリを使用して、画像をキャンバスに描画するときに画像を「ドラッグ可能」にすることも言及する価値があります。これは、コードのより完全な全体像を示すためです。

アドバイスをいただければ幸いです。

2013年1月28日編集@18:05

わかりました。画像がすべて左上隅に描画されている理由はわかっていると思います。drawImage呼び出されている関数は、KineticJSライブラリの関数であり、自分の関数ではありません。ライブラリが提供する機能に関して変更したことがいくつかあるため、ローカルに保存したライブラリのコピーを使用しています。位置の配列を作成し、それらの位置からランダムな要素を選択するコードを、代わりにライブラリのdrawImage関数にコピーすることは意味がありますか？

2013年1月29日23時15分編集

そうです、kineticJSライブラリの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]);
            }
        }

        context.restore();
    }

ここにあるすべてのコードを完全に理解しているかどうかはわかりません...行は何ですか

var a = Array.prototype.slice.call(arguments);

やってる？この「スライス」関数はこれまで見たことがありません...

座標の配列からランダムに座標を選択することで、すべての画像を別々の場所に描画できるようにするために作成したコードを含めるようにこの関数を編集する方法を誰かが指摘できますか？おそらく、このコードをコピーして関数に貼り付けることができるはずですが、関数のどこに配置すればよいかわかりません...何か提案はありますか？

4

2 に答える 2

1

xPos は配列であるため、 xPos[key] のように配列形式を使用してその要素を取得する必要があり、 randomXPosition は関数です。 randomXPosition() のように、戻り値を取得するにはそれを実行する必要があります。

結論は 、

X: xPos[randomXPosition()],
于 2013-01-28T17:05:25.573 に答える
0

配列内の特定のインデックスにアクセスするには、() ではなく [] を使用する必要があります。

  xPos[randomXPosition] // if randomXPosition = 1, then this gives you the value at xPos[1]. 

  xPos(randomXPosition) // <-- this is a function call, what it is expecting is something like:
  function xPos(number){
     var value = number * Math.random();
     return value; //return some value maybe?
  };
于 2013-01-28T17:05:37.053 に答える