clientIO / JointJS_plus

JointJS+ support
4 stars 9 forks source link

paper.getContentBBox() gives wrong width/height in IE9/10/11 #68

Open KarolBuchta opened 8 years ago

KarolBuchta commented 8 years ago

Another issue that i encountered, that also affects png export, is the following:

When computing the dimensions of the final png on export i use this method:

paper.getContentBBox()

Now, here are some example values for a diagramm in Chrome: height: 1200 width: 480

And here the values for the same diagramm in IE9/10/11: width : 481 height : 1201

I know this seems picky, but when we export png we mutliply the width and height of the original svg, to get a higher res for print quality. The difference of one pixel leads to to a vertical distortion of the png image in our case. This distortion can only be seen when the height/width is somewhat high.

This issue exists on IE9, IE10, IE11.

If there is a better method or a workaround known, this would be cool. Maybe it's always only one px?

Best Karol

DavidDurman commented 8 years ago

Hi Karol,

That could be caused by very slight differences in how different browsers calculate bounding boxes and round numbers. I'm not sure if I understand the issue with the distortion. If you multiply both dimensions, then you should get the same, scaled, result? Could you please create a simple test case for us to see?

Thanks!

KarolBuchta commented 8 years ago

Hi David,

thanks for your reply. The problem is not the multiplication itself, but that the addition of the same value in both dimensions leads to a slightly different ratio if compared. This is just more apparent by the multiplication.

Let's take the example from above: 1200/480 = 2.5

Now add 100 to both dimensions (in the case above it's only one px): 1300/580 = 2.24

Now the difference of the ratio in the original diagramms is of course much lower, but if one reaches a certain size, and multiplies dimensions, the difference in ratio becomes visible in the final png.

I already assumed that it's not possible for you to fix this easily, even doupt it's possible, because i had seen that the respective method in the code calls a native js method itself, and returns the result without modification.

I'll dig into it as soon i have time (code example, maybe check whether there is some system in the miscalculation). Currently i am close to finishing a project at work. I'll switch to another aspect then. I plan to do this in between.

See you then.

Best regards Karol