Определить границы фигуры / графики, нарисованные на холсте - PullRequest
Новая
       7

Определить границы фигуры / графики, нарисованные на холсте

4 голосов
/ 07 января 2011

У меня есть простой пример HTML5 Canvas, который позволяет пользователю рисовать пути на холсте. Есть ли способ определить прямоугольные границы пути / фигуры, которая была нарисована? (то есть, какова ширина, высота прямоугольной области, окружающей путь).

Я понимаю, что мог бы сделать математику, пока фигура рисуется, чтобы выяснить границы, но я хотел посмотреть, есть ли более простой / встроенный способ.

Ответы [ 2 ]

6 голосов
/ 07 января 2011

Я предполагаю, что вы используете LineTo, единственный способ, о котором я мог подумать, - это сохранить минимальное / максимальное значения для высоты и ширины, когда пользователь рисует контуры.Кроме этого, единственный способ получить информацию с холста - это использовать getImageData, который даст вам только необработанную информацию о пикселях.

Быстрый пример, показывающий это

http://jsfiddle.net/dEnAF/

примечание: я просто создаю кучу случайных точек.Главное, что нужно запомнить, - установить минимальные / максимальные значения в координаты первого пути, который создает пользователь.

Полагаю, вы знали об этом, поэтому реальный ответ - нет, к сожалению, в настоящее время нет встроенного способа сделать это ..

3 голосов
/ 08 января 2011

Несмотря на то, что вы должны отслеживать это самостоятельно, я бы посоветовал обернуть его в функциональность многократного использования Вот минимальный пример, отслеживая его только для moveTo и lineTo. Смотрите живой пример здесь: http://phrogz.net/tmp/canvas_bounding_box.html

function trackBBox( ctx ){
  var begin = ctx.beginPath;
  ctx.beginPath = function(){
    this.minX = this.minY = 99999999999;
    this.maxX = this.maxY = -99999999999;
    return begin.call(this);
  };
  ctx.updateMinMax = function(x,y){
    if (x<this.minX) this.minX = x;
    if (x>this.maxX) this.maxX = x;
    if (y<this.minY) this.minY = y;
    if (y>this.maxY) this.maxY = y;
  };
  var m2 = ctx.moveTo;
  ctx.moveTo = function(x,y){
    this.updateMinMax(x,y);
    return m2.call(this,x,y);
  };
  var l2 = ctx.lineTo
  ctx.lineTo = function(x,y){
    this.updateMinMax(x,y);
    return l2.call(this,x,y);
  };
  ctx.getBBox = function(){
    return {
      minX:this.minX,
      maxX:this.maxX,
      minY:this.minY,
      maxY:this.maxY,
      width:this.maxX-this.minX,
      height:this.maxY-this.minY
    };
  };
}

...

var ctx = myCanvas.getContext("2d");

// Cause the canvas to track its own bounding box for each path
trackBBox(ctx);
ctx.beginPath();
ctx.moveTo(40,40);
for(var i=0; i<10; i++) ctx.lineTo(Math.random()*600,Math.random()*400);

// Find the bounding box of the current path
var bbox = ctx.getBBox();
ctx.strokeRect(bbox.minX,bbox.minY,bbox.width,bbox.height);
...