本文介绍了获取2条或多条路径相交的边界框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在下面的例子中,我用金色表示了 3 个形状的交集(在本例中我使用的是圆形,但那 3 个形状可以是任何形状)金色交集是使用 clip-path 进行裁剪的结果.

In the following example I have in gold the intersection of 3 shapes (in this case I'm using circles but those 3 shapes can be anything) The golden intersection is the result of clipping with clip-path.

我想使用交点作为符号,为此我需要知道交点的边界框,即红色描边矩形.

I would like to use the intersection as a symbol and for this I would need to know the bounding box of the intersection, i.e the red stroked rectangle.

如果我使用intersection.getBBox(),我会在裁剪之前获取边界框.

If I'm using intersection.getBBox() I'm getting the bounding box before clipping.

如何获取交点的边界框?

How can I get the bounding box of the intersection?

console.log(intersection.getBBox())
svg{border:solid}

.circles{fill:none;stroke:black}
<svg id="svg" viewBox="-150 -150 300 300" width="300">
  <defs>
  <circle id="c1" cx="0" cy="-50" r="80"></circle>
  <circle id="c2" cx="43.3" cy="25" r="80"></circle>
  <circle id="c3" cx="-43.3" cy="25" r="80"></circle>

  <clipPath id="clipC2"><use xlink:href="#c2"/></clipPath>
  <clipPath id="clipC3"><use xlink:href="#c3"/></clipPath>
  </defs>

  <g class="circles">
  <use xlink:href="#c1"/>
  <use xlink:href="#c2"/>
  <use xlink:href="#c3"/>
  </g>


<g id="intersection">
  <g clip-path="url(#clipC3)">
  <use fill="gold" xlink:href="#c1" clip-path="url(#clipC2)"/>
  </g>
</g>

  <rect x="-38" y="-42" width="75" height="74" stroke="red" fill="none"/>
</svg>

推荐答案

主要思想是这样的:

  1. 我正在使用 svg 元素,将其设为 base64 并将其用作图像的 src 属性.
  2. 我在 canvas 上绘制 svg 元素,其大小与 svg 元素相同.
  3. 我从画布中获取图像数据
  4. 遍历图像数据并获取:
  1. I'm taking the svg element, make it base64 and use it as the src attribute of an image.
  2. I'm painting the svg element on a canvas with the same size as the svg element.
  3. I get the image data from the canvas
  4. loop through the image data and get:

  • 黑色像素的最小 x 值
  • 黑色像素的最小 y 值
  • 黑色像素的最大 x 值
  • 黑色像素的最大 y 值
    1. 我正在使用这些值为交叉点构建新的 viewBox 值.
    //the svg's viewBox
    let vB = { x: -100, y: -100, w: 200, h: 200 };
    
    //canvas
    let ctx = c.getContext("2d");
    //set the size of the canvas equal to the size of the svg element
    c.width = vB.w;
    c.height = vB.h;
    
    // draw the svg element on the canvas
    let xml = new XMLSerializer().serializeToString(svg);
    // make it base64 and use it as the src attribute of the image
    let img=new Image()
    img.src = "data:image/svg+xml;base64," + btoa(xml);
    img.onload = function() {
      //paint the image on the canvas
        ctx.drawImage(this, 0, 0);
    
    //get the image data from the canvas
    let imgData = ctx.getImageData(0, 0, vB.w, vB.h).data;
    
    // x the smallest x value of a black pixel
    // y the smallest y value of a black pixel
    // X the biggest x value of a black pixel
    // Y the biggest y value of a black pixel
    let x = vB.w,
      y = vB.h,
      X = 0,
      Y = 0;
    let n = 0;
    
    for (let i = 0; i < imgData.length; i += 4) {
      n++
      if (imgData[i + 3] != 0) {
        //if the alpha (i+3) value of the pixel is not 0
        let _y = Math.ceil(i / (4 * vB.w));
        let _x = (i / 4) % vB.w;
        if (_x < x) { x = _x; }
        if (_y < y) { y = _y; }
        if (_x > X) { X = _x; }
        if (_y > Y) { Y = _y; }
      }
    
      if(n==imgData.length/4){
        let newViewBox = `${x + vB.x} ${y + vB.y} ${X - x + 1} ${Y - y}`;
        reuleaux.setAttribute("viewBox", newViewBox);
        console.log(`viewBox="${newViewBox}"`);
      }
    }
    }
    svg,
    canvas {
      outline: 1px solid;
    }
    <svg id="svg" viewBox="-100 -100 200 200" width="200">
      <defs>
      <circle id="c1" cx="0" cy="-50" r="80"></circle>
      <circle id="c2" cx="43.3" cy="25" r="80"></circle>
      <circle id="c3" cx="-43.3" cy="25" r="80"></circle>
      <clipPath id="clipC2"><use xlink:href="#c2"/></clipPath>
      <clipPath id="clipC3"><use xlink:href="#c3"/></clipPath>
      </defs>
    <g id="intersection">
      <g clip-path="url(#clipC3)">
      <use xlink:href="#c1" clip-path="url(#clipC2)"/>
      </g>
    </g>
    </svg>
    <!--<img id="img" width="200" height="200"/>-->
    
    <canvas id="c"></canvas>
    
    <svg id="reuleaux" viewBox="-100 -100 200 200" width="200" style="background:#dfdfdf">
      <use xlink:href="#intersection"/>
    </svg>

    这篇关于获取2条或多条路径相交的边界框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-31 01:55