Question

我正在尝试检测画布中绘制的元素（例如：馅饼中的每个切片），以便稍后对它们施加click事件，但这似乎不是一件容易的事，我认为数学将是最好的方法，但是我应该从哪里开始。

请帮助我找到解决方案。

这是演示： outer link

代码是：

    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      #myCanvas{
            width: 50%;
            height: 50%;
        }
    </style>
    </head>
    <body>
     <canvas id="myCanvas"></canvas>
    </body>
    </html>

    class Piechart{
    constructor(){
      this.options = arguments[0];
      this.canvas = arguments[0].canvas;
      this.ctx = this.canvas.getContext('2d');
      if(this.options.colors){
        this.colors = arguments[0].colors;
      }
      else if (!this.options.colors){
        this.colors = [
          "#fde23e",
          "#f16e23",
          "#57d9ff",
          "#937e88",
          '#2fe678',
          '#228888',
          '#b111c1'
        ];
      }
      this.donut_hole = 0.5;
    }

    drawPie(){
      var total_value = 0;
      var color_index = 0;
      for(var categ in this.options.data){
        var val = this.options.data[categ];
        total_value += val;
      }

      var start_angle = 0;
      for(var categ in this.options.data){
        var val = this.options.data[categ];
        var slice_angle = 2*Math.PI*val/total_value;

        this.drawPieSlice(
          this.ctx,
          this.canvas.width/2,
          this.canvas.height/2,
          Math.min(this.canvas.width/2,this.canvas.height/2),
          start_angle,
          start_angle+slice_angle,
          this.colors[color_index%this.colors.length]
        );

        start_angle += slice_angle;
        color_index++;
      }
    }

    drawPieSlice(){
      arguments[0].fillStyle = arguments[6];
      arguments[0].beginPath();
      arguments[0].moveTo(arguments[1],arguments[2]);
      arguments[0].arc(
      arguments[1],
      arguments[2],
      arguments[3],
      arguments[4],
      arguments[5]
    );
    arguments[0].closePath();
    arguments[0].fill();
    }
  }

var myCanvas = document.getElementById("myCanvas");
var myCanvas_width = myCanvas.scrollWidth;
var myCanvas_height = myCanvas.scrollHeight;

myCanvas.width = myCanvas_width;
myCanvas.height = myCanvas_height;

var myVinyls = {
 'Classical music':10,
 'Rock':14,
 'Pop':15,
 'Jazz':4,
 'test':6,
 'test_1':7,
 'test_2':8
};

var myPiechart = new Piechart(
 {
  canvas:myCanvas,
  data:myVinyls,
  colors:[
   "#fde23e",
   "#f16e23",
   "#57d9ff",
   "#937e88",
   '#2fe678',
   '#228888',
   '#b111c1'
  ]
 }
);
myPiechart.drawPie();

如何能够检测每个切片？谢谢。

编辑
我发现了一个很棒的解决方案，目的是在画布中添加点击区域，这里是链接：Anton Lavrenov

Answer 1

首先，画布上没有元素，您应该了解这一点。这是一个2D平面，仅绘制物体，如果要移动物体，则需要完全重绘它们。

这说让我们回到最初的问题。
由于在画布上创建了“对象”，因此您知道了该对象的大小和距离，应将其保留在某些js对象中以备后用。
在这种情况下，我将要做的事情是拥有一个可以容纳所有其他对象数据的对象，因此，当您在画布上单击时，可以单击docker inspect MY_CONTAINER | jq -r '.[].NetworkSettings.Networks[].IPAddress'并确定它们是否大于或等于您的任何对象'x and y和x s 示例算法为

如何检测画布中的元素？

1 个答案: