如何從顯示在另一個畫布元素上方的一個畫布元素中刪除

Question

我有2張畫布。 一，主畫布。 在其上繪制所有內容，其次是語音氣泡畫布（氣球）。 當客戶單擊時，它將在我的主畫布上顯示有關特定區域的信息。

介紹演講泡沫后，我在玩我的畫布，遇到一個問題。

這是一個簡單的代碼，顯示了如何引入氣泡：-

http://jsfiddle.net/m1erickson/AJvkN/

我的畫布是一個時間軸，並且可以滾動； 上面有歷史事件。 用戶單擊事件后，就會出現氣泡。

現在，我不想發生的事情是，當客戶單擊畫布時，會出現一個氣泡，然后滾動，該氣泡將移動到滾動圖像上的新位置，但是仍然顯示有關先前位置的信息。

為此，我們有hideballoon（） ，它向左分配css屬性：-200。 但是，這仍然導致不一致。 例如，如果我從左向右拖動畫布，則氣球不會隨着滾動而消失，而是重新出現在新位置。

有一個.remove（）函數$("#balloon").remove()

http://api.jquery.com/remove/

這成功刪除了氣球，但問題是：-完全刪除了氣球，以后不會再有任何點擊聲彈出。 這不是我想要的。 我想要一些動態的東西。

單擊事件>>出現氣泡>>滾動畫布>>氣泡消失>>單擊畫布>>與新單擊有關的氣泡回到>> >>依此類推。

Answer 1

[編輯]

使用.show（）和.hide（）可以在不需要氣球時將氣球擋住

當用戶滾動窗口時，只需隱藏氣球即可。

我假設您正在滾動窗口而不是畫布。 如果要滾動畫布，則只需使用$（“＃canvas”）。scroll（...）。

因此，當您需要氣球時：

        // move the balloon canvas to the target
        $("#balloon").css({left:offsetX+X, top:offsetY+Y});

        // and show it
        $("#balloon").show();

當用戶單擊氣球或窗口滾動時，隱藏氣球：

    // listen for clicks on the balloon and then hide the balloon
    $("#balloon").click(function(e){ $("#balloon").hide(); });

    // listen for scrolls and then hide the balloon
    $(window).scroll(function(e){
        $("#balloon").hide(); 
    });

這是工作示例代碼和小提琴： http : //jsfiddle.net/m1erickson/uWHkv/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ width:2000px; background-color: ivory; padding:10px;padding-top:100px; }
    #canvas{border:1px solid red;}
    #balloon{ position:absolute; left:-200px; }
</style>

<script>
$(function(){

    // get reference to our drawing canvas
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    // get reference to our balloon canvas
    var balloon=document.getElementById("balloon");
    var popCtx=balloon.getContext("2d");

    // get the position of canvas relative to window
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    // define some targets and their basic info
    var count=1;
    var circles=[];
    for(var x=50;x<1900;x+=50){
        circles.push({
            x:x,  y:120, radius:20,
            color:"blue",  
            info:"I'm #"+(count++)});
    }

    // draw the target circles on the canvas
    ctx.fillStyle="yellow";
    ctx.font="16px verdana";
    for(var i=0;i<circles.length;i++){
        drawCircle(circles[i]);
        ctx.beginPath();
        ctx.fillText(i+1,circles[i].x-8,circles[i].y+5);
    }

    // listen for clicks on the canvas and show the balloon
    $("#canvas").click(function(e){ 

        // get the mouseclick position
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);

        // account for the window scrolling
        var scrollX=$(window).scrollLeft();
        var scrollY=$(window).scrollTop();

        // see if we clicked on any targets
        for(var i=0;i<circles.length;i++){
            var circle=circles[i];
            var dx=(circle.x-scrollX)-mouseX;
            var dy=(circle.y-scrollY)-mouseY;
            var radius=circle.radius;
            // true if we clicked in the target circle
            if(dx*dx+dy*dy<=radius*radius){
                drawBalloon(circles[i].x+radius,circles[i].y-100,circles[i].info);
            }
        }
    });


    // listen for clicks on the balloon and then hide the balloon
    $("#balloon").click(function(e){ $("#balloon").hide(); });

    // listen for scrolls and then hide the balloon
    $(window).scroll(function(e){
        $("#balloon").hide(); 
    });


    function drawCircle(circle){
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle=circle.color;
        ctx.strokeStyle="black";
        ctx.lineWidth=3;
        ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2,false);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        ctx.restore();
    }


    function drawBalloon(X,Y,theInfo){
        popCtx.save();
        popCtx.fillStyle="#FD0";
        popCtx.strokeStyle="#000";
        // draw the balloon
        popCtx.beginPath();
        popCtx.moveTo(52,02);
        popCtx.quadraticCurveTo(02,02,02,42);
        popCtx.quadraticCurveTo(02,77,27,77);
        popCtx.quadraticCurveTo(27,102,07,102);
        popCtx.quadraticCurveTo(37,102,42,77);
        popCtx.quadraticCurveTo(102,77,102,42);
        popCtx.quadraticCurveTo(102,02,52,02);
        popCtx.lineWidth=3;
        popCtx.stroke();
        popCtx.fill();
        // draw theInfo
        popCtx.font="10pt arial";
        popCtx.fillStyle="black";
        popCtx.fillText(theInfo,10,50);
        popCtx.restore();
        // move the balloon canvas to the target
        $("#balloon").css({left:offsetX+X, top:offsetY+Y});
        $("#balloon").show();
    }

}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=1950 height=300></canvas>
    <canvas id="balloon" width=105 height=105></canvas>
</body>
</html>

如何從顯示在另一個畫布元素上方的一個畫布元素中刪除

問題描述

1 個解決方案

解決方案1
1 已采納 2013-05-08 17:11:45

如何從顯示在另一個畫布元素上方的一個畫布元素中刪除

問題描述

1 個解決方案

解決方案1 1 已采納 2013-05-08 17:11:45

解決方案1
1 已采納 2013-05-08 17:11:45