Question

我试图在画布中围绕多个形状绘制一个框，表示这些形状与组相关。试过如下：

var ctx = c.getContext("2d"),
radius = 10,
rect = c.getBoundingClientRect(),

ctx.fillText("Draw something here..", 10, 10);
ctx.fillStyle = "red";
ctx.beginPath();
ctx.arc(250, 300, radius, 0, 6.28);
ctx.fill();
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(200, 100, radius, 0, 10.28);
ctx.fill();
ctx.fillStyle = "brown";
ctx.beginPath();
ctx.arc(350, 210, radius, 0, 10.28);
ctx.fill();

var x = (250+200+350)/3;
var y = (300+100+210)/3;

var radius = Math.sqrt((x1*x1)+(y1*y1));
var _minX = x - radius;
var _minY = y - radius;
var _maxX = x + radius;
var _maxY = y + radius;

ctx.rect(_minX,_minY,(_maxX-_minX+2),(_maxY-_minY+2));
ctx.stroke();

但它没有正确绘制。 How to get bounding box coordinates for canvas content?此链接仅解释了不适用于现有形状的路径。下面是我想要绘制的图像：

Answer 1

Fabric＆lt; - 看看这个库是否有助于将其用于我的一个项目，它简单快捷。

Answer 2

此代码不是生产就绪，或者是最佳解决方案，但它适用于“大多数情况”。

我正在使用imageData来检查非白色像素。（如果不是0 - RGBA Pixel ==＆gt; Object）并且使用它可以缩小可能的Rectangle。如果你不希望文本在Rectangle中，你还需要调整它。

此代码可以/ 应优化。

编辑： 现在我只检查是否设置了Alpha值。并创建一些随机对象来测试多个结果

信息： 剪切/剪切的对象会发生，因为它们超出了画布大小。

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var colors = ["red", "blue", "green", "black"];

ctx.fillText("Draw something here..", 0, 10);

/** CREATEING SOME RANDOM OBJECTS (JUST FOR TEST) **/
createRandomObjects();

function createRandomIntMax(max){
	return parseInt(Math.random() * 1000 * max) % max + 1;
}

function  createRandomObjects(){
	var objectsToDraw = createRandomIntMax(20);
	for(var idx = 0; idx < objectsToDraw; idx++){
		ctx.fillStyle = colors[createRandomIntMax(colors.length)];
		ctx.beginPath();
		ctx.arc(createRandomIntMax(c.width), createRandomIntMax(c.height), createRandomIntMax(30), 0, 2 * Math.PI);
		ctx.fill();
	}
}


/** GETTING IMAGE DATA **/
var myImageData = ctx.getImageData(0, 0, c.width, c.height);

/** FINDING BORDERS **/
findBorders(myImageData.data);

function findBorders(imageData) {

    var result = {
        left: c.width,
        top: c.height,
        right: -1,
        bottom: -1
    }

    var idx = 0;
    var lineLow = -1;
    var lineHigh = -1;
    var currentLine = 0;
    var currentPoint, helper;
    while (idx < imageData.length) {
        currentPoint = imageData[idx + 3]; 

        /** CHECKING FOR OBJECT **/
        if (currentPoint != 0) {

            helper = parseInt(idx % (c.width * 4)) / 4;
            if (lineLow < 0) {
                lineLow = helper;
                lineHigh = helper;
            } else {
                lineHigh = helper;
            }
        }

        if (idx !== 0 && (idx % (c.width * 4)) === 0) {
            currentLine = idx / (c.width * 4);
            // Updating the Border Points
            if (lineLow > -1) {
                result.left = Math.min(lineLow, result.left);
                result.top = Math.min(currentLine, result.top);
                result.right = Math.max(lineHigh, result.right);
                result.bottom = Math.max(currentLine, result.bottom);
            }

            lineLow = -1;
            lineHigh = -1;
        }

        idx += 4;
    }

    ctx.rect(result.left, result.top, result.right - result.left, result.bottom - result.top);
    ctx.stroke()

}

<canvas id="canvas"></canvas>

Answer 3

使用getBoundingClientRect（）获取确切的边界

如何在html5画布中围绕多个形状绘制一个框

3 个答案: