I am developing canvas using fabricjs in react development environment.
When rendering a line from the start point to the end point (x1, x2, y1, y2) with database fetched coordinates, the line is drawn from the symmetrical start point. The problem doesn't happen all the time, but when I draw long in the center of the screen. Thanks in advance to those who respond.
Reproducing the problem gif
flow )
Right-click on the screen -> draw line -> draw -> save start point, end point coordinate database -> render object
I tried adjusting the flip-related options and angle in the line option, but that method also caused the same problem. (etc. flipX or Y, lockScalingFlip..)result image:
Related
How to draw the line (blue) from 2D vertices (automatically adding edges)?
How to add mechanical dimensions (black)?
I could use PHP to draw the 1. Anyone knows any library or hint for doing the 2. (for instance in JS)?
Some insights:
The mechanical dimensions can only be horizontal or vertical. They should however be able to snap first onto the vertices, and secondly onto the cross-sections of the edge and itself (red circles). I am also thinking about possibility of doing this in some CAD software, but how to make edges automatically from the imported points?
The short story: I am trying to use THREE.TrackballControls to move the camera, but the (upside-down) x-z plane is where the x-y plane should be. Can anyone help?
The long story: I've been trying to add device orientation controls to a project. I have already used the THREE.TrackballControls to move the camera when mouse and touch are being used, and the direction the camera points feeds into other functionality. I am using v69 of three.js.
So, I have been looking into using THREE.DeviceOrientationControls to enable device orientation. Specifically, what I'm after is for rotation to be in the x-y plane when the device is upright in front of me and I turn around. Or in other words, when the device is face up on the table it is looking in the -ve z-direction, and when upside down it it looking in the +ve z-direction. Sounds fairly straightforward, right?
There are plenty of examples around to follow, but I seem to be stuck with axes incorrectly orientated, i.e. what should be my x-y plane is coming out as the x-z plane, but upside-down. I created a test page based on an example with a BoxGeometry cube I found, and then added red, yellow and blue spheres to the middle of the faces that corresponded to the +ve x-, y-, and z-directions respectively, and then pale versions of the same coloured spheres for the corresponding -ve directions. Testing this on an iPad confirmed that the scene axes and the real world axes were not lining up.
I have spent a bit of time trying to get to grips with how this Object works, and the main sticking point is in the function returned by setObjectQuaternion() which does the tricky bit:
...
return function (quaternion, alpha, beta, gamma, orient) {
euler.set(beta, alpha, -gamma, 'YXZ'); // 'ZXY' for the device, but 'YXZ' for us
quaternion.setFromEuler(euler); // orient the device
quaternion.multiply(q1); // camera looks out the back of the device, not the top
quaternion.multiply( q0.setFromAxisAngle( zee, - orient ) ); // adjust for screen orientation
}
...
where q1 is quaternion for a -pi/2 rotation around the x-axis, and zee is a unit z-axis vector.
I set up a jsfiddle here to help me debug this, but it wasn't rendering correctly on the iPad itself, so I had to add in some faking of orientation events, and plenty of logging, and continue on a normal desktop + console. This jsfiddle goes through each of the 6 basic orientations and sees whether the camera is looking in the direction I expect.
(Initially it would seem that a pi/2 rotation around the x-axis is what is required, but removing the quaternion.multiply(q1) doesn't fix it - I haven't even started looking at non-zero screen orientations yet.)
Ultimately, I'd like to make this more like the TrackballControls/OrbitControls with a target point that the camera always looks at (unless panned) and rotates around, once I've figured this "simple" stuff out.
Anybody have any ideas how I can orientate my camera properly?
I am absolutely confused on what the clipAngle method in d3 does. I've poked in the wiki and in the library its self but am not able to put it in plain vanilla English.
https://github.com/mbostock/d3/wiki/Geo-Projections#clipAngle
I see that my orthographic projection gets sliced in half if the clip angle is set to 90.
If set to 180 I see the front and the back of the sphere
Zero I se nothing
So basically I can imagine this as a plane slicing the sphere?
thanks!
Imagine a pin that's anchored in the center of the sphere pointing straight at you, it's now at 0 degrees, and this doesn't render anything. Change the angle of this pin by moving the end pointing at you up. At 90° the pin is pointing straight up and it renders everything between 0° and 90°. Rotate it a bit further and it starts to render the back half of the sphere.
For reference, here's one clipped at 107° so that it renders a bit of the backside and appears to "wrap" around the inner globe:
Im going to try to explain this as best as I can.
I have a centerpoint defined on a canvas element where I am using Kinetic JS to draw triangles.
What I want to do, is create an array of coordinates based on the center point of the excircle radius of a triangle (Kinetic draws regular polygons by using the excircle radius) to see how many of the triangle center points will fit on the canvas in a grid structure. Think this but bigger:
Now Ive already done this with squares because they fall in the same interval from the centerpoint on both the X axis and the Y axis. However with triangles this ends up being different due to where the radius center point of the excircle on a triangle is. Here is a semi clear picture illustrating the interval difference:
Now these coordinates HAVE to be pushed into an array in a very specific way, or else the way I have planned for them to interact will not work correctly.
Ultimately I want to find the bottom most triangle coordinate possible. Find out if that triangle is flipped at 180 degrees or 0 degrees respectively while making sure the centerpoint of the entire canvas is touching the vertex of a triangle.
Sounds complicated? It is. Ive been trying several different methods and racking my brain for two weeks now, and I cant figure out an algorithm that will allow me to do this from any canvas size possible.
I'm trying to write a script (javascript) in an API of a Virtual Table Top program so I can manipulate some tokens (Car Wars :)).
I'm sort of finding the answer, but it seems like I'm struggling and reinventing the wheel so I thought I'd ask for help. One reason I'm getting confused is the program returns results based on +y is down and Deg go clockwise which is different than what all the trig formulas want (counter clockwise and +y is up).
Here is what I have access to. Rectangle rotates around centre, Centre point(x,y), width, height, and rotation. I've got the code working for moving the rectangle in the direction of the rotation, side to side, up and down, etc. Now I need to be able to rotate it around any of the four corners or any point would be nice, but four corners are all thats needed.
It won't let me include an image since I'm new so I hope the description is good enough. I had an image all done up. :(
In the API I can't actually draw the rectangle, I can only set its rotation, and centre value. So my thought was if I can find the x,y of one corner currently, then rotate it the desired degs around the centre (I can do this easily by setting the rectangles rotation), find the new x,y of that same corner. Then I will know the offset and apply that to the centre (thats how the rectangle is moved as well).
So I need to be able to find the x,y of any corner of a rectangle at any given starting angle, then again at a new angle rotated at its centre. This offset would then be easily applied to the centre x,y and the rectangle would see to have rotated along one of its corners.
Thanks for any help you can give. I'm hoping I will eventually figure it out, just writing this description out actually has helped me think it through. But I'm currently stuck!
Konrad
The trick to rotating around an arbitrary point in 2d (eg, one of the four corners of the rectangle), is to first translate the vertices of the shape so that the point around which you want to rotate is in the origin (ie 0,0).
To achieve this:
1. Translate your rectangle by (-x, -y).
2. Rotate your rectangle by the desired angle.
3. Translate your rectangle by (x, y) to place it back where it originally was.
where (x,y) is the x/y coordinates of the point around which to rotate.
You can use negative angles to adjust for clockwise rotations.
There is a lot of info about this on the net, for example:
http://www.siggraph.org/education/materials/HyperGraph/modeling/mod_tran/2drota.htm