Comments (10)
I'd love this to happen. I'm going to look into tying mouse event into backbone events (never used backbone before) myself anyway though.
from two.js.
+1 for mouse and touch events. at different levels- two-level, polygon-level, vertex-level
from two.js.
Thanks for you all voicing your suggestions. It helps me prioritize what I should work on.
Until I'm able to implement something like this there are a few options:
- The SVG Renderer creates actual nodes in the dom tree. They each have an
id
attribute that corresponds with its twoid
attribute. You can bind normal dom svents to this node. See below for usage. - Every group and polygon has a method
getBoundingClientRect
which can help you do hit testing.
var rect = two.makeRectangle(x, y, w, h);
rect.domElement = document.querySelector('#two-' + rect.id);
rect.domElement.addEventListener('click', doSomething);
I'm writing this on my phone, apologies for mistakes. I'll clean it up when I get to a computer.
from two.js.
@jonobr1 using SVG with click events sounds like a perfect workaround for now! I can live with that..
It would be a good idea to make a proof of concept and link to the prototype from the documentation..
from two.js.
Yep, @jankeesvw: http://jonobr1.github.io/two.js/examples/svg-events.html
from two.js.
@jonobr1 nice work! I think we can close this ticket!
from two.js.
👍
from two.js.
As for handling events @bbn, I wonder if this is out-of-scope for the project. Hear me out before you shoot it down. I recently found toolkitchen/PointerEvents which looks like one great way to polyfill for handling mouse + touch events in a canonical way. However, it's not the only way. The inception of touch events has brought on a number of different styles to treat user input in the browser.
This in addition to other people discussing about using the rendering system outside of the browser's context where there are different user inputs makes me think that the library shouldn't force a style onto the developer. I do think exposing hit testing compatible with all renderers would help facilitate a developers effort in user input interaction.
from two.js.
Understood @jonobr1 . I guess what might be helpful would be a companion adapter for the web that would automagically glue the plumbing together. Thanks for pointing me to https://github.com/toolkitchen/PointerEvents (ha)
from two.js.
yep, no problem! Coincidentally someone else has already started implementing mouse events into two.js: #17
from two.js.
Related Issues (20)
- [Question] Woscope integration HOT 3
- How to animate millions of points on browser canvas using two.js HOT 12
- wrong type in getPointAT declaration in path class HOT 2
- "Dom-less" start for just generating result svg [Enhancement] HOT 1
- Can two handle thousands of svg path elements and hundreds of thousands of points? HOT 1
- [Enhancement] Add Path.Compound Static Method
- How to check if an object is currently being hovered by the mouse whilst taking rotation into account? HOT 3
- Two.Utils.read.path throws an error HOT 3
- Smooth out lines and Round Corners HOT 2
- [Bug] WebGL Renderer Blurry HOT 5
- Partial Ellipse HOT 6
- Text `BoundingClientRect` in nested groups HOT 2
- compile error typescript[Bug] HOT 2
- svg fill-opacity [Bug] HOT 12
- Issues with Zoom and ZUI when upgrading from version 8.1.1 to 8.11 (latest) HOT 3
- creating curve path using anchors and make path not working ! HOT 2
- [Question] Best way to render ~250k polygons HOT 6
- Text Baseline in SVG Backend HOT 5
- [Bug] Negative scale does not work, with webgl mode only HOT 1
- Can i add events to shapes if renderer is Two.CanvasRenderer 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 two.js.