Question

我需要你的建议，我有一个带画布的html，在这个HTML中你可以添加圆圈然后链接这些来制作一个数字，我还想插入一个搜索，你可以找到不同的数字，并专注于它，所以我不知道它是否会更好：覆盖数字或为每个数字使用不同的画布。（我还没有实现搜索功能。）你觉得怎么样？

以下是制作de draw的功能

//此函数将圆圈放在<table>上，然后另一个函数获取img坐标并将其链接成一个数字。

function position(year, mon)
{
    $('#' + year + ' .' + mon).prepend('<img class="black_point" src="./images/circle.png"/>');
}

     var table = document.getElementById("tabla");
        var images = table.getElementsByTagName("img");  
        var canvas = document.getElementById("miCanvas");
        var ctx = canvas.getContext("2d");
        var x,y; // Remember coordinates

        canvas.width  = table.offsetWidth;
        canvas.height = table.offsetHeight;

        function connect(image, index) { //this function link the images
            var tabBcr = table.getBoundingClientRect();
            var imgBcr = image.getBoundingClientRect();
            x = imgBcr.left + (imgBcr.width / 2) - tabBcr.left;
            y = imgBcr.top + (imgBcr.height / 2) - tabBcr.top;
            index === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
        }

        //this function add a new canvas
        function figure(){
         /*$('#miCanvas').prepend('<canvas id="myCanvas">Su navegador no soporta Canvas.</canvas>');
         //this is the property who overlay the figures
         cxt.globalCompositeOperation="source-over";/*
  //which it will be better to implement a search function?
        }

        // new path here
        ctx.beginPath();

        for(var i=0; i<images.length; i++){ 
          connect( images[i], i);  // provide index so we can sep. move/line
        }

        // then at the end:
        ctx.fill();

Answer 1

使用1个html画布来保存所有已连接的圈子。

这可以简化聚焦/模糊数字时的事件处理。

您可以测试鼠标是否位于您的某个圈内：

// given a circle defined by centerX, centerY, radius
var dx = mouseX - centerX;
var dy = mouseY - centerY;
var isInside = dx*dx+dy*dy <= radius*radius;

以下是关于如何关注数字的概述：

创建定义每个圆圈的javascript对象。如果一组对象构成一个图形，则向每个圆形对象添加group属性，表示该圆圈所属的组。
将所有圆形对象放入数组中。
在鼠标事件处理程序中，遍历circle-objects-array并找到鼠标下方的哪个圆圈。该圈子group已成为焦点。

在同一画布html5上制作多个画布或叠加图

1 个答案: