Как щелкнуть каждый круг среди нескольких кругов, используя JavaScript - PullRequest
Новая
       33

Как щелкнуть каждый круг среди нескольких кругов, используя JavaScript

0 голосов
/ 15 октября 2019

Я пытаюсь визуализировать некоторые данные JSON, где для x количество ключей и y нет значений x и y будет показано количество кружков. Каждый ключ имеет разное количество значений. Во-первых, будет отображаться число кружков x, и когда пользователь щелкнет один кружок, будет показано количество кружков y в зависимости от количества значений, которые он имеет. И предыдущие круги будут скрыты.

Сейчас я могу показать количество кругов на основе клавиш, но не могу обработать щелчок для кругов. Я добавляю код и заранее благодарю за помощь. 

import * as json from "../test.json";    
const circle = new Path2D();
var seed = 1;  
function random() {
var x = Math.sin(seed++) * 10000;
return x - Math.floor(x); }

function drawCircle(canvas, context){
var x = random()*(canvas.width);
var y = random()*(canvas.height);
var r = 25;
var color = "rgb(" + Math.floor(random() * 256) + "," + Math.floor(random() * 256) + "," + Math.floor(random() * 256) + ")";

// Create circle
context.beginPath();
circle.arc(x, y, r, 0, 2 * Math.PI);
context.fillStyle = color;
context.fill(circle);
context.closePath();  }

main();

И основная функция: 

function main(){
        if (typeof document !== 'undefined') {
        const canvas = <HTMLCanvasElement>document.getElementById('box');
        const context: CanvasRenderingContext2D = canvas.getContext('2d')!;

        canvas.width  = window.innerWidth;
        canvas.height = window.innerHeight;

        var jsonData = json["info"];
        var files = Object.entries(jsonData);

        for (var j=0; j<Object.keys(jsonData).length; j++){ // till filenames length
            var s = files[j][1];

            console.log(Object.keys(s).length); //number of functions
            console.log(files[j][1]);   // functions

            drawCircle(canvas, context);
        }
          canvas.addEventListener('click', function(e) {
        if (context.isPointInPath(circle, e.clientX, e.clientY)) {
            alert("HELLO!")
        }
        else{console.log("else");}

        // Draw circle
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.fill(circle);
         }, false);

    }}
...