Как выбрать линии, которые нарисованы на холсте HTML5? - PullRequest
Новая
       47

Как выбрать линии, которые нарисованы на холсте HTML5?

4 голосов
/ 18 ноября 2011

Я использую HTML5 Canvas для построения линий.Единственная линия формируется путем вызова drawLine () для нескольких промежуточных точек.Например:

(0,0) -> (10, 10) -> (10, 5) -> (20, 12)

будет отображаться как одна линия на графике.

Все (x, y) координаты строки хранятся в массиве.

Я хочу предоставить пользователям возможность выбирать строку, когда они нажимают на нее.Это становится трудно сделать в HTML5 Canvas, поскольку линия не представлена ​​объектом.Единственный вариант, который мне оставлен, - это сначала найти координату (x, y) любой линии, ближайшей к (x, y) события mousedown.Как только я определю, какую линию выбрал пользователь, мне нужно перерисовать линию жирным цветом или нанести на нее полупрозрачный цвет.Но я предполагаю, что это будет слишком трудоемким, поскольку включает в себя зацикливание всех (x, y) координат всех линий.

Я ищу способы, которые могут помочь мне достичь вышеупомянутого вболее эффективный способСтоит ли использовать SVG в HTML5?

Буду признателен за любые предложения.

Ответы [ 3 ]

6 голосов
/ 19 ноября 2011

Самый простой способ сделать это на холсте HTML5 - сделать снимок данных изображения для холста и во время перемещения мыши посмотреть на альфа-цвет пикселя под мышью.

Я разместил рабочий пример этого на своем сайте здесь:
http://phrogz.net/tmp/canvas_detect_mouseover.html

Вот основной код, который я написал. Передайте ему контекст и функцию, и она вызовет вашу функцию с компонентами RGBA под пикселем. 

function pixelOnMouseOver(ctx,callback){
  var canvas = ctx.canvas;
  var w = canvas.width, h=canvas.height;
  var data = ctx.getImageData(0,0,w,h).data;
  canvas.addEventListener('mousemove',function(e){
    var idx = (e.offsetY*w + e.offsetX)*4;
    var parts = Array.prototype.slice.call(data,idx,idx+4);
    callback.apply(ctx,parts);
  },false);
}

А вот как это используется на этой тестовой странице: 

var wasOver;
pixelOnMouseOver(ctx,function(r,g,b,a){
  var isOver = a > 10; // arbitrary threshold
  if (isOver != wasOver){
    can.style.backgroundColor = isOver ? '#ff6' : '';
    wasOver = isOver;
  }
  out.innerHTML = "r:"+r+", g:"+g+", b:"+b+", a:"+a;
});
4 голосов
/ 18 ноября 2011

Я думаю, вам будет проще в SVG. Там каждая строка будет <polyline>, и вы можете добавить обработчик onclick, чтобы делать то, что вы хотите. Например ... 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" 
              style="fill:none;stroke:black;stroke-width:5"
              onclick="this.style.stroke='red'" />
</svg>
1 голос
/ 18 ноября 2011

Единственный способ сделать это на холсте - это определить цвет пикселя и следовать по пути или сохранить пути как объекты и обнаружить щелчок по этому пути.

...