как удалить один элемент холста из отображения поверх другого элемента холста

У меня есть 2 холста. Один, основной холст. На котором все нарисовано, Во-вторых, холст речи (воздушный шар). Которая отображает информацию о конкретных регионах на моем основном холсте при кликах.как удалить один элемент холста из отображения поверх другого элемента холста

Я играл с моим полотном, представив речевой пузырь и столкнувшись с проблемой.

Это простой код, который показывает, как вводится выноски: -

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

Мой холст хронология и прокручивать; на нем изображены исторические события. Как только пользователь нажимает на событие, появляется пузырь речи.

Теперь, что я не хочу, это когда клик нажимает на холст, появляется пузырь речи, а затем прокручивается, пузырь речи перемещается в новое положение на прокрученном изображении, однако по-прежнему отображается информация о предыдущее местоположение.

Для этого у нас есть hideballoon(), который присваивает свойство css left: -200. Однако это все еще вызывает несоответствия. Например, если я перетаскиваю холст слева направо, воздушный шар не исчезает со свитком, а вновь появляется в новой позиции.

есть функция .remove() $("#balloon").remove()

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

Это успешно удаляет воздушный шар, однако, проблема с этим: - он полностью удаляет воздушный шар, и никаких будущих щелчки не появятся больше пузырей речи. Это не то, что я хочу. Я хочу что-то динамичное.

Нажмите на событие >> появляется пузырь речи >> холст прокрутки >> пузырь речи исчезает >> нажмите на холст >> пузырь речи, связанный с новым щелчком, появится снова >> и т. Д. И т. Д.

источник

2013-05-08 Philo

[Изменено]

Использование .show() и .hide(), чтобы держать шар из вашего пути, когда его не требуется

Когда пользователь прокручивает окно, то просто скрыть воздушный шар ,

Я предполагаю, что вы прокручиваете окно вместо холста. Если вы прокручиваете холст, просто используйте $ («# canvas»). Вместо этого прокрутите (...).

Так что, когда вам нужно воздушный шар:

 // 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>

источник

2013-05-08 17:11:45 markE

marke, если вы читаете мое вышеприведенное описание, это именно то, что я делаю, и имею проблемы с!!!что произойдет, если я прокручу, мой холст, а затем снова найду шар? Он должен уйти. – Philo

См. Мой отредактированный ответ. PS - downvote ... Я просто пытаюсь помочь :( – markE

Я пробовал все, свойства: сверху, влево, вправо и снизу, проверенная видимость: скрытая .remove(). Ни одна из них не работает так, как я хочу , переместив пузырь -200 влево, он все еще там, и когда я прокручиваю свой оригинальный холст ... воздушный шар снова появляется в какой-то точке, это происходит постоянно, независимо от того, прокручиваю ли я слева направо или налево. удалите воздушный шар, а иногда и не очень расстраивайтесь. – Philo

как удалить один элемент холста из отображения поверх другого элемента холста

ответ

Смежные вопросы