dmko Posted September 7, 2017 Share Posted September 7, 2017 I'm porting over an old flash app that used to rely on this third-party contribution: http://proj.lamb-mei.com/handlesheet/ (you need to enable flash) Source code is at https://github.com/lamb-mei/HandleSheet It's basically just a button that you touch and move around, and it causes the target to rotate, scale, and move with it. Looks like this: Now I want to implement it from scratch in PIXI. I know I need to somehow get the rotation based on trigonometry calculations of the initial points and updated points of the button and target DisplayObject... and I'll experiment around with that, but thought someone here might know offhand OSUblake and ivan.popelyshev 2 Quote Link to comment Share on other sites More sharing options...
Taz Posted September 7, 2017 Share Posted September 7, 2017 IDK the math offhand to calculate rotation between two points, but you can add the button sprite as a child of the target sprite, then just rotate, scale and move the target, for that part... Quote Link to comment Share on other sites More sharing options...
dmko Posted September 7, 2017 Author Share Posted September 7, 2017 Thanks! Yeah - pinning it to the corner is also a problem and tying them together via the display list is helpful I'm more stuck about the actual rotation value calculation though (and of course - it must be able to resume from whatever position it was in- not just when it starts at 0) Quote Link to comment Share on other sites More sharing options...
Taz Posted September 7, 2017 Share Posted September 7, 2017 I think on pointerdown you could store the start rotation of the target and the start position for the button, then on pointermove set the target's rotation to start rotation + angle, where angle is Math.atan2(p2.y - p1.y, p2.x - p1.x), where p2 is the button's start position and p1 is the button's current position. That's just grabbing the formula and stuff off the top of my head but I think it would work -also the idea is adapted from drag-and-drop concepts that I learned from the projection example's drag and drop so maybe that could help too (the interaction code at the bottom of the example code I mean). dmko 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 7, 2017 Share Posted September 7, 2017 There are good examples on drag&drop in new plugin: https://pixijs.github.io/examples/#/projection/plane.js , I'm sure if you look closer into toLocal/toGlobal functions, you'll find the way to use it (the way, not the plugin). Sometimes its necessary to reset scale and rotation, then calculate rotation with those functions, then apply it. dmko 1 Quote Link to comment Share on other sites More sharing options...
dmko Posted September 7, 2017 Author Share Posted September 7, 2017 Thanks!! will try that out tomorrow Wow I never saw that projection example before... man... more stuff to learn!! ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 7, 2017 Share Posted September 7, 2017 I think its time for you to look inside Container/DisplayObject/Transform and suggest how to improve them to be more compatible with modern frameworks, of course if its possible without performance loss or code style fails. dmko 1 Quote Link to comment Share on other sites More sharing options...
dmko Posted September 14, 2017 Author Share Posted September 14, 2017 Update - I ended up installing the `gl-matrix` lib and storing my points as `vec2` Once I had that a simple google on how to do rotation and scale with Vector2's was a piece of cake. Basically just const v1 = vec2.normalize(vec2.create(), originalVector); const v2 = vec2.normalize(vec2.create(), moveVector); const vAngle = Math.atan2(v2[1],v2[0]) - Math.atan2(v1[1],v1[0]); const vScale = vec2.length(moveVector) / vec2.length(originalVector); Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted September 14, 2017 Share Posted September 14, 2017 Congrats! Now try to use only vec2.js from gl-matrix, you dont need everything else. Dont add new dependencies dmko 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.