OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Standard method of getting containing box?

  • Thread starter Thread starter Lee Taylor
  • Start date Start date
L

Lee Taylor

Guest
OK, if I have the following shapes that are rotated and then selected you will see their bounding boxes: enter image description here

I am trying to write some code to align objects with respect to each other. So I would like to get each object's "containing box".

I am aware of getBoundingRect but, for the above shapes this gives me the following: enter image description here

As such, these boxes are not that useful to me. Is there a standard method of getting what I would call the "containing boxes" for all shapes? For example, I would like to be able to have the following boxes returned to me: enter image description here

So, for any given shape I would like to be able get the red bounding rectangle (with no rotation).

Obviously, I could write a routine for each possible shape within fabricJS but I would prefer not to reinvent the wheel! Any ideas?

Edit Here's an interactive snippet that shows the current bounding boxes (in red):


Code:
$(function () 
{
    canvas = new fabric.Canvas('c');

    canvas.add(new fabric.Triangle({
      left: 50,
      top: 50,
      fill: '#FF0000',
      width: 50,
      height: 50,
      angle : 30
    }));

    canvas.add(new fabric.Circle({
      left: 250,
      top: 50,
      fill: '#00ff00',
      radius: 50,
      angle : 30
    }));

    canvas.add(new fabric.Polygon([
      {x: 185, y: 0},
      {x: 250, y: 100},
      {x: 385, y: 170},
      {x: 0, y: 245} ], {
        left: 450,
        top: 50,
        fill: '#0000ff',
        angle : 30
      }));

    canvas.on("after:render", function(opt) 
    { 
        canvas.contextContainer.strokeStyle = '#FF0000';
        canvas.forEachObject(function(obj) 
        {
            var bound = obj.getBoundingRect();

            canvas.contextContainer.strokeRect(
                bound.left + 0.5,
                bound.top + 0.5,
                bound.width,
                bound.height
            );
        });
    });

    canvas.renderAll();
});

Code:
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c" width="800" height="600"></canvas><br/>

<p>OK, if I have the following shapes that are rotated and then selected you will see their bounding boxes:
<a href="https://i.sstatic.net/sn1K8.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/sn1K8.png" alt="enter image description here"></a></p>

<p>I am trying to write some code to align objects with respect to each other. So I would like to get each object's "containing box".</p>

<p>I am aware of <code>getBoundingRect</code> but, for the above shapes this gives me the following:
<a href="https://i.sstatic.net/NoySf.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/NoySf.png" alt="enter image description here"></a></p>

<p>As such, these boxes are not that useful to me. Is there a standard method of getting what I would call the "containing boxes" for all shapes? For example, I would like to be able to have the following boxes returned to me:
<a href="https://i.sstatic.net/NoySf.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/fjmUP.png" alt="enter image description here"></a></p>

<p>So, for any given shape I would like to be able get the red bounding rectangle (with no rotation).</p>

<p>Obviously, I could write a routine for each possible shape within fabricJS but I would prefer not to reinvent the wheel! Any ideas?</p>

<p><em>Edit</em> Here's an interactive snippet that shows the current bounding boxes (in red):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function ()
{
canvas = new fabric.Canvas('c');

canvas.add(new fabric.Triangle({
left: 50,
top: 50,
fill: '#FF0000',
width: 50,
height: 50,
angle : 30
}));

canvas.add(new fabric.Circle({
left: 250,
top: 50,
fill: '#00ff00',
radius: 50,
angle : 30
}));

canvas.add(new fabric.Polygon([
{x: 185, y: 0},
{x: 250, y: 100},
{x: 385, y: 170},
{x: 0, y: 245} ], {
left: 450,
top: 50,
fill: '#0000ff',
angle : 30
}));

canvas.on("after:render", function(opt)
{
canvas.contextContainer.strokeStyle = '#FF0000';
canvas.forEachObject(function(obj)
{
var bound = obj.getBoundingRect();

canvas.contextContainer.strokeRect(
bound.left + 0.5,
bound.top + 0.5,
bound.width,
bound.height
);
});
});

canvas.renderAll();
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="c" width="800" height="600"></canvas><br/></code></pre>
</div>
</div>
</p>
 

Latest posts

Top