Question

大家早上好。

我正在为我工作的企业系统构建一个图表，但我遇到了一个问题，我需要插入一些标识，我可能会被 JavaScript （ name，id，label，... ）。

有人可以告诉我如何分别识别图表的每个元素？更准确地说，我想知道每个元素 arc 的创建。

如果有人想看到代码更好地理解它，我会把链接放在这里：
- JS Bin

Answer 1

您在画布上绘制的任何内容都不会自动记住或标有ID。

所有画布图形都会被遗忘并无法访问像素。但是，有一些方法可以跟踪您的各种图纸。

不是将posX，posY和颜色信息保存在单独的并行数组中，而是如何为每个节点创建一个对象。

然后您可以将id属性添加到每个节点对象：

var nodes=[];

nodes.push({id:"sun", x:100, y:100, color:"yellow"});
nodes.push({id:"earth", x:50, y:50, color:"blue"});
nodes.push({id:"moon", x:50, y:60, color:"gray"});

当然，从每个节点中提取图形信息......

您可以在函数内绘制图形，并在需要时应用scaleFactor。

    function drawGraph(){
        context.clearRect(0,0,canvas.width,canvas.height);
        context.save();
        context.scale(scaleFactor,scaleFactor);
        for(var i=0; i<nodes.length;i++){
            var node=nodes[i];
            context.beginPath();
            context.moveTo(centerCanvasX,centerCanvasY);
            context.lineTo(node.x,node.y);
            context.stroke();
            context.beginPath();
            context.arc(node.x,node.y,node.radius,0,Math.PI*2,false);
            context.closePath();
            context.stroke();
            context.fillStyle=node.color;
            context.fill();
        }
        context.restore();
    }

对于拖动/单击/ etc，您可以点击测试每个节点数组元素，直到找到匹配项。

function hit(x,y){
    for(var i=0;i<nodes.length;i++){
        var node=nodes[i];
        var dx=node.x-x;
        var dy=node.y-y;
        var rr=node.radius;
        if(dx*dx+dy*dy<rr*rr){
            return(i);
        }
    }
    return(-1);
}

匹配元素将具有您需要的ID。

如果您的图表已缩放并且您正在使用鼠标坐标进行拖动，则必须调整浏览器通过图表的当前scaleFactor为您提供的坐标：

mouseX=parseInt(event.clientX-offsetX)/scaleFactor;
mouseY=parseInt(event.clientY-offsetY)/scaleFactor;

这是代码和小提琴：http://jsfiddle.net/m1erickson/c4hsW/

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

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var centerCanvasX=canvas.width/2;
    var centerCanvasY=canvas.height/2;

    var startX;
    var startY;
    var isDown=false;

    var nodes=[];
    var dragNode;

    var scaleFactor=1.00;

    nodes.push({id:"sun", x:centerCanvasX, y:centerCanvasY, radius:20, color:"yellow"});
    nodes.push({id:"earth", x:50, y:50, radius:5, color:"blue"});
    nodes.push({id:"moon", x:50, y:65, radius:3, color:"gray"});

    drawGraph();

    function drawGraph(){
        context.clearRect(0,0,canvas.width,canvas.height);
        context.save();
        context.scale(scaleFactor,scaleFactor);
        for(var i=0; i<nodes.length;i++){
            var node=nodes[i];
            context.beginPath();
            context.moveTo(centerCanvasX,centerCanvasY);
            context.lineTo(node.x,node.y);
            context.stroke();
            context.beginPath();
            context.arc(node.x,node.y,node.radius,0,Math.PI*2,false);
            context.closePath();
            context.stroke();
            context.fillStyle=node.color;
            context.fill();
        }
        context.restore();
    }

    function hit(x,y){
        for(var i=0;i<nodes.length;i++){
            var node=nodes[i];
            var dx=node.x-x;
            var dy=node.y-y;
            var rr=node.radius;
            if(dx*dx+dy*dy<rr*rr){
                return(i);
            }
        }
        return(-1);
    }


    function handleMouseDown(e){
        mouseX=parseInt(e.clientX-offsetX)/scaleFactor;
        mouseY=parseInt(e.clientY-offsetY)/scaleFactor;

        var i=hit(mouseX,mouseY);
        if(i>=0){ 
            startX=mouseX;
            startY=mouseY;
            isDown=true;
            dragNode=nodes[i];
        }
    }

    function handleMouseUp(e){
      isDown=false;
    }

    function handleMouseOut(e){
      isDown=false;
    }

    function handleMouseMove(e){
        if(!isDown){return;}

        // get the current mouse position
        mouseX=parseInt(e.clientX-offsetX)/scaleFactor;
        mouseY=parseInt(e.clientY-offsetY)/scaleFactor;
        // reposition the dragged node
        dragNode.x+=(mouseX-startX);
        dragNode.y+=(mouseY-startY);
        startX=mouseX;
        startY=mouseY;
        // redraw the graph
        drawGraph();
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

    $("#bigger").click(function(){
        scaleFactor+=0.20;
        drawGraph();
    });

    $("#smaller").click(function(){
        scaleFactor-=0.20;
        drawGraph();
    });

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

</head>

<body>
    <button id="bigger">Scale Up</button>
    <button id="smaller">Scale Down</button><br>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

如何设置Canvas Path的标识？

1 个答案: