0

HTML5 キャンバスを含む Web ページがあり、その上にいくつかの画像といくつかのテキストと図形を表示しています。

テキストと形状は、JavaScript 関数によって描画されています。

function drawGameElements(){
    /* Draw a line for the 'score bar'. */
    context.moveTo(0, 25);
    context.lineTo(1000, 25);
    context.stroke();

    /* Draw current level/ total levels on the left, and current score on the right. */
    context.font = "11pt Calibri"; /* Text font & size */
    context.strokeStyle = "black"; /* Font colour */
    context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
    context.strokeText(currentScore, 950, 15);
}

と

function drawDescriptionBoxes(){
CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
        if(typeof stroke == "undefined" ){
            stroke = true;
        }
        if(typeof radius === "undefined"){
            radius = 5;
        }
        this.beginPath();
        this.moveTo(x + radius, y);
        this.lineTo(x + width - radius, y);
        this.quadraticCurveTo(x + width, y, x + width, y + radius);
        this.lineTo(x + width, y + height - radius);
        this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        this.lineTo(x + radius, y + height);
        this.quadraticCurveTo(x, y + height, x, y + height - radius);
        this.lineTo(x, y + radius);
        this.quadraticCurveTo(x, y, x + radius, y);
        this.closePath();
        if(stroke){
            context.stroke();
        }
    }

    context.drawDescriptionArea(70, 400, 120, 70);
    context.font = '25pt Calibri';
    context.strokeText('Asset', 90, 440);

    context.drawDescriptionArea(300, 400, 120, 70);
    context.strokeText('Liability', 310, 440);

    context.drawDescriptionArea(540, 400, 120, 70);
    context.strokeText('Income', 550, 440);

    context.drawDescriptionArea(750, 400, 180, 70);
    context.strokeText('Expenditure', 760, 440);
}

画像は、まずソースから HTML の隠しセクションに読み込まれ、そこから「sources」と呼ばれる JavaScript 配列に読み込まれます。

function loadImages(sources, callback){
    var imagesDir = "";
    var images = {};
    var loadedImages = 0;
    var numImages = 0;

    //console.log("length " + sources.length);
    for (var src in sources){
        numImages++;
    }
    //console.log("Num Images " + numImages);

    var index=0;
    console.log("length " + sources.length);
    for (index=0;index < numImages ;index++){
        console.log(index);
        images[index] = new Image();
        images[index].src = sources[index];
        console.log("Adding " + sources[index]);
        callback(images[index]);
        console.log("images array length = " + images.length);
    }

    stage.add(imagesLayer); // should only be added once!!
    drawGameElements();
}

その後、別の JS 関数を使用してこれらの画像をキャンバスに描画します。

function drawImage(imageObj) {
    //var layer = new Kinetic.Layer();

    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: 50,
      height: 50,
      // puts the image in teh middle of the canvas
      x: stage.getWidth() / 2 - 50 / 2,
      y: stage.getHeight() / 2 - 50 / 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);
  }

この関数は、KineticJS ライブラリを使用して画像をドラッグ可能にします。ブラウザーでページを表示すると、最初はすべてが意図したとおりに表示され、画像、テキスト、および図形がすべて表示されます。ただし、画像をクリックしてキャンバスにドラッグ アンド ドロップするとすぐに、標準の JS 関数 (KineticJS ライブラリではない) によって描画されたテキストと図形はすべてキャンバスから消えます。

これは、新しい場所で画像を再描画するときに、KineticJS ライブラリがキャンバスを完全にクリアするためだと思います。

画像をドラッグ アンド ドロップするときに、キャンバスにも描画したテキストやその他の図形がキャンバスに残るようにするにはどうすればよいですか? または、少なくともドラッグ アンド ドロップで画像と一緒に再描画されますか?

4

1 に答える 1

-1

すでに Kineticjs を使用している場合は、最初に Kineticjs に画像とテキストを描画させてみませんか?

function drawGameElements(){
    /* Draw a line for the 'score bar'. */
    context.moveTo(0, 25);
    context.lineTo(1000, 25);
    context.stroke();

    /* Draw current level/ total levels on the left, and current score on the right. */
    context.font = "11pt Calibri"; /* Text font & size */
    context.strokeStyle = "black"; /* Font colour */
    context.strokeText(currentLevel + "/" + totalLevels, 10, 15);
    context.strokeText(currentScore, 950, 15);
}

Kineticjs でカスタム シェイプに簡単に変換できます。drawDescriptionBoxes 関数もそうです。

于 2012-12-13T13:17:01.440 に答える