0

こんにちは皆さん html5 キャンバスに JCanvasScript で複数の画像を読み込みたいのですが、できません。各行に画像を並べて読み込みたい。そのために、関数 loadx(numX, numY) numX があります - 行内の画像の数であり、numY は行の数です。たとえば、loadX(5,4) または loadX(10,3) は、同じ結果を 1 つの画像のみに与えています。

ここにコードがあります

    <script>
        function init(){
            loadx(5, 4);
        }

        function loadx(numX, numY){
            var numTotal = numX * numY;
            var imgBMPs = [];
            var sliceImg = new Image();
            sliceImg.src = "abstract.jpg";
            var sliceBmp;
            var imgBmp = [];
            imgBmp['width'] = sliceImg.width / numX;
            imgBmp['height'] = sliceImg.height / numY;
            imgBmp['row'] = 0;
            imgBmp['y'] = 0;

            sliceImg.onload = function(){
                for (i = 0; i < numY; i++){
                imgBmp['y'] = i * imgBmp['height'];
                    for (a = 0; a < numX; a++){
                        jc.start('canvas');
                        imgBmp = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                        imgBMPs.push(imgBmp);
                        jc.start('canvas');
                    }

                }
            }
        }
    </script>

コードをデバッグしようとすると、次のことがわかりました。

この後

              sliceImg.onload = function(){
                    for (i = 0; i < numY; i++){
                    imgBmp['y'] = i * imgBmp['height'];

コードを追加しました

alert (imgBmp['height']);

ページを更新すると、最初の結果は数字でしたが、他の結果は「未定義」だったので、何が問題なのですか?

4

1 に答える 1

1

内側の for ループ内で、変数imgBmpを のインスタンスに再割り当てしていますjs.image。これは、ループが 2 回繰り返されるまでに、元のオブジェクトのプロパティが失われることを意味します。

次のようにコードを更新してみてください。

<script>
    function init(){
        loadx(5, 4);
    }

    function loadx(numX, numY){
        var numTotal = numX * numY;
        var imgBMPs = [];
        var sliceImg = new Image();
        sliceImg.src = "abstract.jpg";
        var sliceBmp;


        /*
           // imgBmp is being used as an object not an array 
           // so the following syntax is usually preferred
           var imgBmp = {
               width: sliceImg.width / numx,
               height: sliceImg.height / numy
           }

           // and to retrieve a property:
           console.log(imgBmp.width);
        */

        var imgBmp = [];
        imgBmp['width'] = sliceImg.width / numX;
        imgBmp['height'] = sliceImg.height / numY;
        imgBmp['row'] = 0;
        imgBmp['y'] = 0;

        sliceImg.onload = function(){
            for (i = 0; i < numY; i++){
            imgBmp['y'] = i * imgBmp['height'];
                for (a = 0; a < numX; a++){
                    jc.start('canvas');
                    // create a new variable to hold the instance of jc.image
                    // so the original object reference is preserved 
                    var jcImage = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                    imgBMPs.push(jcImage);                        
                    //imgBmp = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                    //imgBMPs.push(imgBmp);
                    jc.start('canvas');
                }

            }
        }
    }
</script>
于 2012-08-19T12:01:15.680 に答える