Question

我有一个带有HTML5画布的网页，我在其上显示了一些图像，以及一些文字和形状。

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中的隐藏部分，然后从那里加载到名为“源”的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库在重新绘制新位置的图像时会完全清除画布。

在拖放图像时，如何确保我在画布上绘制的文本和其他形状仍保留在画布上？或者至少他们会在拖放时重新绘制图像？

Answer 1

如果你已经使用过Kineticjs，为什么不让ju只让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函数。

KineticJS似乎是从画布中清除了我不想被清除的东西

1 个答案: