кодирование полмиллиона кругов в шаблоне - PullRequest
Новая
       33

кодирование полмиллиона кругов в шаблоне

0 голосов
/ 04 декабря 2018

Я пытался создать настольное приложение (javascript, canvas) и нарисовать 413.280 кликабельных кругов по определенному шаблону, но я не могу понять, как это сделать.Я не уверен, что canvas - лучшее решение, но я не знаю, как решить эту проблему и получить приложение с разумной производительностью.

Вот макет, который я пытаюсь получить: макет круга

Я хочу 2 ряда окружностей в каждой строке.деление в середине должно быть оставлено пустым.

Каждая левая строка должна быть 588 кружков.

Каждая правая строка должна быть 560 кружков

Есть 180 строкна каждой стороне, что означает (588 * 2 * 180) = 211680 кругов на левой стороне.

Есть (560 * 2 * 180) = 201600 кругов на правой стороне.

Может ли кто-нибудь указать мне правильное направление, может быть, есть подсказка, как я могу решить это наиболее эффективным способом?Заранее спасибо.

РЕДАКТИРОВАТЬ: вот JSFiddle, который я получил до сих пор jsfiddle.net / cmxLoqej / 2 /

JavaScript 

window.onload = draw;

function draw() {
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var ycoordinate = 20;

//draw the line 180 times
  for (var x = 1; x <= 180; x++) {

    // draw the left side
    for (var i = 1; i <= 1; i++){
        c.strokeStyle = 'black';
        c.moveTo(0,ycoordinate);
        c.lineTo(6468,ycoordinate);
        c.stroke();
        ycoordinate = ycoordinate + 40;
        }          
  }
 var ycoordinate = 20;

  //draw right side
    for (var x = 1; x <= 180; x++) {


        for (var j = 1; j <= 1; j++){
            c.strokeStyle = 'black';
            c.moveTo(6776,ycoordinate);
            c.lineTo(canvas.width,ycoordinate);
            c.stroke();
            ycoordinate = ycoordinate + 40;
        }
    }
}


var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  var canvasPattern = document.createElement("canvas");
  canvasPattern.width=11;
  canvasPattern.height=20;
  var contextPattern = canvasPattern.getContext("2d");
  contextPattern.beginPath();

  contextPattern.arc(5, 10, 5, 0, 2 * Math.PI, false);
  contextPattern.strokeStyle = '#003300';
  contextPattern.stroke();
  var pattern = context.createPattern(canvasPattern,"repeat");
 context.fillStyle = pattern;
 context.fillRect(0, 20, 6468, 7160);
 context.fill();

 var canvas2 = document.getElementById('canvas');
  var context2 = canvas.getContext('2d');

  var canvasPattern2 = document.createElement("canvas");
  canvasPattern2.width=11;
  canvasPattern2.height=20;
  var contextPattern2 = canvasPattern.getContext("2d");
  contextPattern2.beginPath();

  contextPattern2.arc(5, 10, 5, 0, 2 * Math.PI, false);
  contextPattern2.strokeStyle = '#003300';
  contextPattern2.stroke();
  var pattern2 = context2.createPattern(canvasPattern2,"repeat");
  context2.fillStyle = pattern;
  context2.fillRect(6776, 20, 6160, 7160);
  context2.fill();

HTML 

<!DOCTYPE html>
<html>
<body> 
<canvas {
 id="canvas"; 
 width= "12936" ; 
 height ="7400";
 style= "border: 1px solid black;";
 padding: 0;
 margin: auto;
 display: block;
}>
</canvas>
</body>
</html>

1 Ответ

0 голосов
/ 04 декабря 2018

Используйте заливку узоры кругов для создания прямоугольных холст-изображений

  • одного ряда левой стороны
  • одного ряда правой рукиside
  • объединенный ряд каждой стороны
  • один холст из 180 строк

Используйте временные объекты CANVAS по мере необходимости для использования context2D.createPattern метод.Вам не нужно добавлять их в DOM только для манипулирования пикселями.

Измените алгоритм, если это необходимо, по мере изучения.Удачного кодирования!

Обновление (правка)

Запуск кода, добавленного к вопросу, показывает, что все круги равномерно распределены по горизонтали и по вертикали.

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

Нахождение круга, по которому щелкнули

Слушателю события щелчка на холсте передается событие мыши объект.

Классический способ определить, по какому кругу щелкнули, - сначала выполнить арифметику для свойств события screenX и screenY для положения экрана, window.scrollX и window.scrollY для значений прокрутки документа и положения холста.в документе, чтобы найти, где щелчок произошел на холсте.

Хотя еще не полностью стандартизировано, свойства мыши offsetX и offsetY evEnt объект предоставляет результат напрямую.Ссылка на MDN показывает довольно хорошую поддержку кросс-браузеров.

Тогда знание макета холста можно использовать для определения, на какой прямоугольный круг шаблон был нажат, и с небольшим количеством алгебры, если щелчок внутрикруг.

...