2012-12-13 4 views
0

은 내가 몇 이미지뿐만 아니라, 텍스트와 모양을 표시하고있어 어떤상의 HTML5 캔버스와 웹 페이지를 삭제하지 않으려는 캔버스에서 사물을 취소 할 것으로 보인다. 텍스트와 모양이 자바 스크립트 함수에 의해 그려진 된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); 
} 

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'라는 자바 스크립트 배열로 이동합니다 :

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 라이브러리가 완전히 캔버스를 지 웁니다 때문입니다 가정합니다.

어떻게 끌어 이미지를 삭제하면 나는 또한 캔버스에 그려 한 텍스트와 다른 모양 캔버스에 남아 있도록 할 수 있습니까? 또는 적어도 끌어서 놓기에 대한 이미지와 함께 다시 그려지 는가?

+0

사용자 정의 'drawFunc'를 사용하여 설명 영역의 운동 모양을 만듭니다. – Shmiddty

답변

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

는 easaly Kineticjs에서 사용자 지정 형태로 변환 그래서 가지 않은 당신의 drawDescriptionBoxes 기능입니다.

+0

이 답변은 부적절하며 부적절합니다. 그것은 OP의 질문에 전혀 대답하지 않습니다. 이런 일이 발생하면 OP와 비슷한 문제가 발생하며 KineticJS를 모양 그리기 전용으로 사용하고 있습니다. –

관련 문제