Comments (5)
@Widdershin Asked me to detail my use case for this.
It's pretty straight forward. I have to make a sort of chart where the y axis is a list of people and the x axis is time.
I have to be able to move the bars inside the chart, so it would be convenient if I could do something like:
Canvas.select(some_sort_of_id).events(click) -> stream of events with information about the pressed mouse buttons etc...
I think this would also require implementing isolation so that the individual bars could easily be defined as separate instances of a component.
So yeah... pretty much the same as the DOM driver. :)
from cycle-canvas.
This is an interesting problem.
Drawing to a canvas simply paints the pixels on the canvas. Any information about what was painted there (a circle, square, text, an image) is lost. To be able to tell what "entity" was clicked on, you need to have the information about what was drawn to the screen (like the vtree used internally in the canvas driver, or just an object where you kept all your entities before even calling cycle-canvas
functions), and the coordinates of the click.
Long story short, you need this:
clickToEntity(allEntities, clickCoordinates) -> entity
Inside that function, you'll have to figure out the layout of all your entities:
- their position (this will be affected by the position and any current transformation)
- the ordering (if 2 entities overlap, the second one will be "over" the first one)
- alpha (possibly, maybe not)
and from that you can figure out who was clicked.
You can do it yourself right now, just getting the clicks from the canvas element and creating your implementation of clickToEntity
, or we can add it to the driver (it should be possible to use the instructions generated from the vtree to keep updating a hit-map while you perform the instructions).
This is a very interesting problem to solve, but I would question if it is something that cycle-canvas
should support. Right now it's not clear to me if we want to have this driver being a straight on wrapper for the html canvas, or if we want to aim more towards something more similar to a game engine.
Another option is to use SVG, as you can attach event listeners to SVG elements in the DOM. I don't know if there's a svg-driver for cyclejs yet.
from cycle-canvas.
Thanks for the response!
SVG is cool, but unfortunately it's too slow for my needs.
I think it would be cool if the canvas driver had similar ergonomics to the DOM driver, Perhaps it could even wrap a library which works on WebGL and falls back to canvas when WebGL isn't available? pixi.js and ivank come to mind, though it might be preferable (for some reason) to make your own. If you go for a game engine, I think WebGL would probably be good.
from cycle-canvas.
If you don't mind me bringing this relatively dusty issue back up, I think we really should provide an API for clicking (and I will gladly work on it). Of course, I am thinking of something very basic that'll just give you the coordinates, and possibly modifier keys. That means tracking entities is left entirely to the user.
The way I see it, clicking the canvas is a very common interaction so it makes sense to include it in this driver.
from cycle-canvas.
#35 does indeed close this.
from cycle-canvas.
Related Issues (20)
- Add support for lines HOT 1
- Create tests HOT 3
- Move repo to cyclejs-community org HOT 2
- Add support for polygons HOT 1
- Support cycle diversity
- Link to flappy bird example is broken in README.md HOT 1
- Add support for transforms HOT 2
- Elements hierarchy meaning HOT 1
- Publishing new versions to NPM HOT 5
- Add support for images
- makeCanvasDriver does not work without its second argument HOT 2
- Add more examples
- Feelings about eslint? HOT 2
- Allow usage with dynamically created canvas HOT 2
- Error when using xs.of instead of Observale.of HOT 1
- Dicontinued? Advice on canvas development? HOT 2
- Document API HOT 6
- Release v0.1.0 HOT 3
- Decide how to proceed with transformations HOT 3
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 cycle-canvas.