1

テキスト フィールドから HTML5 キャンバスに座標を渡したいと考えています。以下のコードを使用して、キャンバスに長方形を描画しています。座標は0,0,50,50

function displayObject(currentObject){
    var imageNumber = $(currentObject).find('div.objectDd input.objectImageNum').val();
    var objectCoordinates = $(currentObject).find('div.objectDd input.objectCoordinates').val();
    var imageId = "";
    var canvasId = "";
    var context = "";
    var canvas = "";


    if(imageNumber != "" && objectCoordinates != ""){
        imageId = "#imgNum".concat(imageNumber);
        canvasId = $('#objectData').find('#miImages '+imageId+' .imageContainer canvas').attr("id");
        canvas = document.getElementById(canvasId);
        context = canvas.getContext("2d");
        context.fillStyle = "#FF0000";
        context.fillRect(objectCoordinates);
    }
}

それらを変数として渡そうとしましたobjectCoordinatesが、長方形は描画されません。

ユーザーが入力したものを座標として渡すにはどうすればよいですか?

4

1 に答える 1

1

現在、objectCoordinates は文字列です。ユーザーが渡す数字を抽出する必要があります。

var coordinateArray = objectCoordinates.split(",")

そして、それらを 1 つずつ渡します。

context.fillRect(coordinateArray[0],
                 coordinateArray[1],
                 coordinateArray[2],
                 coordinateArray[3])

また、変数を文字列で初期化する必要はありません。特に、canvas や context など、最終的に文字列にならないものは特にそうです。

于 2013-03-02T21:26:23.713 に答える