个人中心
gpt4 book ai didi

javascript - Ajax 工具包 : Balloon Popup Extender on html5 Canvas

转载 作者：行者123 更新时间：2023-11-30 13:04:17 30 4
gpt4 key购买 nike

我在我的项目中实现了 Canvas 绘图。我想显示气泡，其中包含与 Canvas 上特定鼠标点击相关的信息。假设单击我的 Canvas 的特定区域会出现一个弹出窗口，其中提供有关 Canvas 上该区域的文本信息。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>


<ajaxToolkit:BalloonPopupExtender ID="BalloonPopupExtender1" 
    runat="server"  
    TargetControlID="myCanvas" 
    BalloonPopupControlID="Panel1"
    Position="TopLeft" 
    BalloonStyle="Cloud"
    BalloonSize="Small"
    CustomCssUrl="CustomStyle/BalloonPopupOvalStyle.css"
    CustomClassName="oval"
    UseShadow="true" 
    ScrollBars="Auto"
    DisplayOnMouseOver="true"
    DisplayOnFocus="false"
    DisplayOnClick="true" />

<canvas id="myCanvas" width="915" height="850" style="border: 2px double #000000;"></canvas>
<script type="text/javascript">

但是这不起作用，我相信这是因为 myCanvas 不是 asp.net/服务器端元素，因此 runat ="server"不是正确的方法。

我目前正在关注这些博客:-

http://www.c-sharpcorner.com/UploadFile/364074/balloonpopupextendercontrol-in-ajax/

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/BalloonPopup/BalloonPopupExtender.aspx

知道如何通过单击在 Canvas 上实现弹出窗口吗？

最佳答案

鉴于您想要响应对特定 Canvas 坐标的点击，您可能必须在客户端工作。下面是在客户端弹出信息的代码。

enter image description here

这段代码将在单独 Canvas 元素内绘制一个信息气球。 Canvas 被移出屏幕直到需要它。您当然可以以任何您想要的方式设置此弹出气球的样式，因为它是一个 Canvas 元素!

<canvas id="balloon" width=105 height=105></canvas>

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

如果您不习惯客户端 javascript，这里是如何获取目标填充 Canvas 相对于窗口的位置

<canvas id="canvas" width=300 height=300></canvas>

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

下面是如何监听在目标填充 Canvas 上的点击。

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

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

    // see if we clicked on any targets, show the balloon
    for(var i=0;i<circles.length;i++){
        var circle=circles[i];
        var dx=circle.x-mouseX;
        var dy=circle.x-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);
        }
    }
});

要测试 Canvas 上的任何目标位置是否被点击，我们可以像这样测试目标周围的圆形区域:

    var dx=targetCircle.x-mouseX;
    var dy=targetCircle.x-mouseY;
    var radius=targetCircle.radius;
    // true if we clicked in the target circle
    if(dx*dx+dy*dy<=radius*radius){
        // we hit a target, display the balloon
    }

这是工作示例代码和 fiddle :http://jsfiddle.net/m1erickson/AJvkN/ 

<!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{ 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 circles=[];
    circles.push({x:40,  y:30, radius:15,color:"red",  info:"I'm red."});
    circles.push({x:150, y:150,radius:25,color:"green",info:"I'm centered."});
    circles.push({x:110, y:85, radius:40,color:"blue", info:"I'm big."});

    // draw the target circles on the canvas
    for(var i=0;i<circles.length;i++){
        drawCircle(circles[i]);
    }

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

        // see if we clicked on any targets
        for(var i=0;i<circles.length;i++){
            var circle=circles[i];
            var dx=circle.x-mouseX;
            var dy=circle.x-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 hideBalloon(e){ $("#balloon").css({left:-200}); });


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

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

</head>

<body>
    <p>Click circles to popup an info balloon</p>
    <p>When info balloon appears, click it do dismiss it</p>
    <canvas id="canvas" width=300 height=300></canvas>
    <canvas id="balloon" width=105 height=105></canvas>
</body>
</html>

关于javascript - Ajax 工具包 : Balloon Popup Extender on html5 Canvas，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16283566/

30 4 0
文章推荐： swift - iOS 应用程序区域监控的限制
文章推荐： ios - Alamofire参数编码，字典中的字典
文章推荐： ios - “NSMutableSet”不能隐式转换为 'Set'
文章推荐： c# - 使用 DevExpress 制作类似 Windows 7 移动文件表单的表单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com