Comments (5)
Canvases are re-drawn from scratch per frame, so you can draw the curved line with changes from frame to frame. Your afterRender
event callback should run on every frame, so if you're drawing the curve at a particular X/Y position and you increment the X position by some small amount every frame, it'll appear to move rightward across the screen.
React can be used to manage the canvas, entity state and MJS library objects, but the underlying MJS and canvas logic is unrelated to React. Technically, anything you can do normally in MJS can also be done in React. In practice, though, React can introduce its own gotchas into your code and make certain things a bit harder than just doing it directly in vanilla JS with MJS.
Feel free to close the issue if/once you feel it's resolved satisfactorily.
from matter-js.
See Matter.js: placing text or images on the canvas behind objects for an example of drawing text on top of the canvas using the afterRender
event, after Matter's renderer has drawn on it.
if you want to do complex drawing, probably don't use the prototyping renderer built into MJS and run MJS headlessly with your own canvas front-end (or maybe even non-canvas DOM elements, if you're working with text). Knowing more about your use case would make it easier to make a recommendation.
from matter-js.
Knowing more about your use case would make it easier to make a recommendation.
actually, i would need to draw a trajectory line from a circle (a projectile that is fired using applyForce when a button is clicked) to the point it can reach
i thought the best way to do this would be with the canvas, as i didn't find a native way in MJS to create curved lines
from matter-js.
Thanks for the context. If you don't mind the trajectory line being on top of the drawing MJS has already rendered on the canvas on each frame, then you may be able to get away with afterRender
(first link above). Otherwise, your use case is probably stretching MJS's prototyping renderer beyond its capabilities, and it'd be better to use your own rendering front-end (second link above). Does one of these approaches meet your needs?
from matter-js.
I think the first way should work, i was able to render canvas using the 'afterRender' event, thankss
Just one question, with this approach can I change this curved line (like the angle or length) according to the value of a react state, for example? or can it only be rendered once?
from matter-js.
Related Issues (20)
- rendering composite bodies HOT 2
- Mass/density has no effect on fall speed HOT 2
- Explode!
- Calculate velocity to jump to the target HOT 2
- Slingshot example with Keys and Constraint, instead of MouseConstraint and Mouse
- Energy loss, despite air friction 0 HOT 1
- Rigid connection between two bodies
- the bodies do not collide and do not stop, but tremble
- Nothing showing in the matter.js canvas HOT 1
- `Body.create` ignores given velocity
- `Body.create` ignores `anglePrev`, `area`, `mass` and `inertia` when they are 0.
- Platformer character sticking to walls instead of sliding down HOT 5
- convert text to matter component like a bridge but Uncaught TypeError: Cannot read properties of undefined (reading 'max')
- support and documentation for vitejs please :( HOT 1
- Complete the rendering problem yourself
- What is the least expensive way to make bodies of different shapes smaller? HOT 1
- Constraints seems to make bodies stick
- add n-gon to the project gallery
- weird texture behavior - multiple textures rendered for one body HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from matter-js.