个人中心
gpt4 book ai didi

javascript - 识别圆弧上的事件

转载 作者：行者123 更新时间：2023-11-28 11:57:28 25 4
gpt4 key购买 nike

我是 html5 的新用户，正在使用 canvas 为我的一个应用程序绘制圆圈。我画了几条弧线来形成一个圆。效果很好。然而我的问题是我想为每个弧关联一个单独的鼠标事件。

我仔细一看，发现 KinteticJS 可能有用。我想知道是否有其他方法可以用于为我使用 Canvas 创建的每个弧附加鼠标事件。请注意，我只使用了一张 Canvas ，没有幽灵 Canvas ，而且我不想使用 SVG。下面是我使用的代码行:

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
canvas.addEventListener("mousedown", doMouseDown(evt), false);

问候纳德

最佳答案

简单的回答是:不，但是......

否:

Canvas 不会“记住”在其自身上绘制的任何内容——绘图只是添加到 Canvas 上的颜色像素。 Canvas 不知道弧线的位置，因此无法进行 HitTest 来查看鼠标按下是否位于该弧线内。

但是...你可以使用数学

您可以使用数学来测试任何点是否在圆内。

如果任何 x/y 位于圆的外半径内且不在内半径内，则 x/y 位于圆弧内。

给定centerX，centerY，outerRadius，innerRadius:

测试 x,y 是否在外半径内:

var dx=testX-centerX;
var dy=testY-centerY;
var isInsideOuterRadius=(dx*dx+dy*dy<outerRadius*outerRadius);

测试 x,y 是否不在内半径内:

var isInsideInnerRadius=(dx*dx+dy*dy<innerRadius*innerRadius);

所以 if( isInsideOuterRadius && !isInsideInnerRadius){ alert("x/y 在你的弧内"); }

如果你想变得更奇特:

如果您“记住” Canvas 的弧线，那么 Canvas 会对该弧线进行 HitTest 。

Context.isPointInStroke 将测试 X/Y 是否位于最近绘制的路径内。如果最近的路径是您的弧线，您可以对您的弧线进行 HitTest 。

例如，如果您绘制此弧线:

context.beginPath();
context.arc(100,100,50,0,Math.PI);

您可以通过提供 isPointInStroke 和鼠标坐标来 HitTest 该弧:

if(context.isPointInStroke(mouseX,mouseY)){
    console.log("The mouse is INSIDE the arc");
}else{
    console.log("The mouse is OUTSIDE the arc");
}

要测试多个弧，

  1. 定义一条弧(执行 context.arc 而不执行 context.lines )
  2. 使用 isPointInStroke 测试弧线
  3. 对下一个弧执行#1

IE 除外:(

isPointInStroke 可在 Chrome 和 Firefox 中使用，但尚无法在 Internet Explorer 中使用。

IE 的替代方案:

您可以在圆弧外部定义一条路径，然后使用 isPointInPath 来测试鼠标是否位于该路径内。

[更新:和示例]

enter image description here

这是一个 fiddle (必须使用 Chrome 或 FF 查看 - IE 不起作用):

http://jsfiddle.net/m1erickson/DsPL7/

这里是示例代码:

<!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; }
    #canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    context.lineWidth=15;

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var PI2=Math.PI*2;

    // create some test data objects
    var arcs=[];

    //outer arcs
    arcs.push({cx:100, cy:100, radius:75, start:0, end: PI2*.33, color:"red"});
    arcs.push({cx:100, cy:100, radius:75, start:PI2*.33, end: PI2*.66, color:"green"});
    arcs.push({cx:100, cy:100, radius:75, start:PI2*.66, end: PI2, color:"blue"});
    // inner arcs
    arcs.push({cx:100, cy:100, radius:45, start:0, end: PI2*.55, color:"purple"});
    arcs.push({cx:100, cy:100, radius:45, start:PI2*.55, end: PI2*.75, color:"orange"});
    arcs.push({cx:100, cy:100, radius:45, start:PI2*.75, end: PI2, color:"maroon"});

    // visibly draw all arcs 

    for(var i=0;i<arcs.length;i++){
        defineArc(arcs[i]);
        context.strokeStyle=arcs[i].color;
        context.stroke();
    }

    // define BUT NOT VISIBLY DRAW an arc

    function defineArc(arc){
        context.beginPath();
        context.arc(arc.cx,arc.cy,arc.radius,arc.start,arc.end);
    }

    // handle mousemove events

    function handleMouseMove(e){

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

        // reset the results box to invisible
        context.clearRect(225,30,20,20);

        // hit-test each arc
        for(var i=0;i<arcs.length;i++){

            // define one arc
            defineArc(arcs[i]);

            // test that one arc
            // if "hit" fill the results box with that arc's color
            if(context.isPointInStroke(mouseX,mouseY)){
                context.fillStyle=arcs[i].color;
                context.fillRect(225,30,20,20);
                return;
            }

        }

    }

    // listen for mousemoves

    $("#canvas").mousemove(function(e){handleMouseMove(e);});

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

</head>

<body>
    <h4>Move mouse over any arc</h4>
    <h4>When mouse is over arc, that color rect will appear</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

关于javascript - 识别圆弧上的事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20218603/

25 4 0
文章推荐： javascript - 获取数组并将奇数和偶数插入单独的数组中
文章推荐： css - 从 SASS 列表生成关键帧
文章推荐： javascript - 从 Controller 切换 AngularJS
文章推荐： css - 使 bootsfaces 模态水平滚动
行者123
个人简介

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

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