I have attempted to create a 2D kinematic skeleton in Fabric.js for a while now but each attempt has proven just as unsuccessful as the last. I have watched multiple videos and read multiple articles, yet none have been able to achieve the effect I am looking for.
Expected behaviour:
All parts should use SVG images for the nodes as I am planning on rendering other images in place of the circles, they are just indicative of joint positions. All parts should be draggable with the mouse. If a part is dragged, it will rotate itself and if applicable, any children/grandchildren based on the position of the mouse. For example, if the shoulder is dragged, the arm and hand parts should also be rotated. If the arm part is dragged, the hand part should also be rotated and the shoulder should not be rotated. If the hand is moved, both the shoulder and the arm parts should not move.
Parts should also not extend beyond the length from them and their parent. If you take a look at the official Fabric.js stickman demo, you will notice that parts easily stray too far away from their "parents", creating an unrealistic rotation.
Please see this YouTube video for expected behaviour.
Here are some examples showing the rotations for a shoulder, arm, and hand part. 
from How can I create a 2D skeleton using forward kinematics in Fabric.js/JavaScript?
No comments:
Post a Comment