Javascript 如何从另一个画布元素的顶部移除一个画布元素
我有两张画布。一是主画布。所有的一切都是以它为基础的, 第二,演讲气泡画布(气球)。它在客户端单击时在我的主画布上显示有关特定区域的信息 在介绍演讲泡泡之后,我在玩弄我的画布,遇到了一个问题 这是一个简单的代码,演示了如何引入语音气泡:- 我的画布是一个时间轴,可以滚动;有历史事件的阴谋。一旦用户单击事件,就会出现语音气泡 现在我不想发生的是,当客户端在画布上单击时,会出现一个语音气泡,然后滚动,语音气泡会移动到滚动图像上的一个新位置,但是仍然显示关于以前位置的信息 为此,我们使用了hideballon(),它将css属性分配给left:-200。但是这仍然会导致不一致。例如,如果我从左向右拖动画布,则气球不会随着滚动消失,而是在新位置重新出现 有一个.remove()函数Javascript 如何从另一个画布元素的顶部移除一个画布元素,javascript,css,html5-canvas,popup-balloons,Javascript,Css,Html5 Canvas,Popup Balloons,我有两张画布。一是主画布。所有的一切都是以它为基础的, 第二,演讲气泡画布(气球)。它在客户端单击时在我的主画布上显示有关特定区域的信息 在介绍演讲泡泡之后,我在玩弄我的画布,遇到了一个问题 这是一个简单的代码,演示了如何引入语音气泡:- 我的画布是一个时间轴,可以滚动;有历史事件的阴谋。一旦用户单击事件,就会出现语音气泡 现在我不想发生的是,当客户端在画布上单击时,会出现一个语音气泡,然后滚动,语音气泡会移动到滚动图像上的一个新位置,但是仍然显示关于以前位置的信息 为此,我们使用了hideb
$(“#气球”).remove()
这成功地删除了引出序号,但是,问题是:-它完全删除了引出序号,以后的单击将不再弹出任何语音气泡。这不是我想要的。我想要有活力的东西
点击事件>>语音气泡出现>>滚动画布>>语音气泡消失>>点击画布>>语音气泡与新建相关的点击出现后退>>等等 [已编辑]
在气球不需要时,使用.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();
});
下面是工作示例代码和一把小提琴:
正文{宽度:2000px;背景色:象牙色;填充:10px;填充顶部:100px;}
#画布{边框:1px纯红;}
#引出序号{位置:绝对;左:-200px;}
$(函数(){
//参考我们的绘图画布
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
//获取对气球画布的引用
var balloon=document.getElementById(“balloon”);
var popCtx=balloon.getContext(“2d”);
//获取画布相对于窗口的位置
var canvasOffset=$(“#画布”).offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
//定义一些目标及其基本信息
var计数=1;
var循环=[];
对于(var x=50;xmarke,如果你阅读了我上面的描述,这正是我正在做的,并且有问题!!!如果我滚动我的画布,然后再次找到气球,会发生什么?它需要离开。请参阅我编辑的答案。PS--向下投票…我只是想帮助:(我尝试了所有属性:顶部、左侧、右侧和底部,尝试了可见性:隐藏..删除()。它们都不是我想要的。通过向左移动气泡-200,气泡仍然存在,当我滚动原始画布时…气泡在某个点重新出现。无论我是从左向右滚动还是从右向左滚动,这种情况都会不断发生。Top属性有时删除气泡,有时并不令人沮丧。“分而治之”。将时间线的圆圈划分为多个部分,并仅点击可能可见的圆圈。例如,如果用户正在查看5月8日,您可能只需要在5月1日至5月15日期间测试这些圆圈。顺便说一句,您可以将引出序号轮廓缓存为图像,以加快引出序号的显示速度。如果您正在绘制m,这将大大加快绘制速度任何引出序号。将空引出序号缓存为图像,而不是每次使用曲线重新绘制:。在“逐帧”中,只需点击测试当前帧内的圆圈。您可以提前构建圆圈对象,但只需在当前帧的圆圈上进行点击测试。自动版主对我们的扩展讨论感到恼火…再见!
<!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>