I’m struggling for pixel precision here. I’m trying to connect nodes by centerpoint with a thin box (the colored lines).
The problem is the rotated lines look different in Hype than they do in Chrome or Safari. The preview doesn’t reflect my work.
Notice the colored lines don’t converge on the right side although in Hype it shows they do
Hmmm, I can easily reproduce this when I use the mouse + command to rotate a line (pic 1). If I go to the Metrics Inspector and increase the number by 1, in the Z rotation box, it seems to fix it (pic 2).
Pic 1 - Z-Rotation = -29° (both pics are in safari)
Pic 2 - manually increasing by 1, Z Rotation = -30°
I think I’ve figured out the issue. The colored lines above were rotated manually with the dial. The black lines were rotated numerically only.
Seems to be a bug, no?
Unfortunately the numeric box doesn’t allow decimals. I can’t precisely rotate an element to a specific point.
Notice 1 line is rotated at -20 degrees and the other at -19 degrees. Neither converge at the red dot. The only way is if I could rotate to -19.3 degrees or something.
When you set location and sizing information for an element in Hype, you’re seeing it within the Webkit rendering engine (used by Hype’s scene editor), so the positioning will likely be exact when you compare it to Safari’s preview, but not as exact when you preview it in Firefox or Chrome. What browser were you testing in?
I have found that elements with borders become inaccurate more quickly than elements without, and that rotation (especially on the Y and X axes) behaves very differently across browsers. Z axis rotation is usually pretty accurate across browsers.
One thing that might help is to make sure that you have no padding or borders on your line elements.
Removing the borders fixed it on my tests (in Safari). Thanks Daniel.
Thanks, Daniel and Greg. I wasn’t able to reproduce the manual rotation issue on my work computer. I’m certain I didn’t have borders or padding on. It’s a rectangle with a fill. But I was using Hype 3 at home. At work, I’m using the Pro version, fwiw
Regarding the rotation issue seen above with the 2 blue and green lines…
Is there any way to allow for decimal increments for rotations?
You might be able to with javascript...
hypeDocument.getElementById('id').style.WebkitTransform = "rotate(45.5deg)";
or
hypeDocument.getElementById('id').style.WebkitTransform = "rotate(25.5rad)";
If the mode is degrees, any angle is assumed to be measured degrees when working with trigonometric functions. 360 degrees = a complete circle. If the mode is set to radians, the angle is assumed to be measured in radians where 2π radians is a complete circle. If the mode is set to grads, the angle is assumed to be measured in grads where 100 grads is a right angle, or 400 grads is a complete circle.
There should be a better cross browser code for this. There is no problem to avoid this with some css for each browser.
Could you share your document for this?