I am currently using Fabric JS but I dont like the layer/group implementation there but beside of layers fabric js has something useful I cannot find in konva js at the moment: viewports. How much work would it to implement zooming to a certain point (most often the mouse cursor) and also emit mouse events with transformed coordinates?
Use case: I would like to zoom in on a the top most layer and use drawing tools to draw on the zoomed area, so the mouse event coordinates need to fit accordingly.
Thank you :)!
I managed to get it working just by using some demo code and one coordinate scaling, great!
Related
May I have a 2D layer for UI, Text, Buttons, etc over the 3D scene in ThreeJS?
Ideally something like engine from PixiJS inside ThreeJS? I've seen PixiJS offers some 3D features so why not combine both libraries in something super-powerful? I just do not want to place any HTML Dom elements over WebGL canvas as this will probably slow down performance on Mobile devices.
One way to solve this issue is to implement the UI as screen space sprites like demonstrated in the following official example (check out how the red sprites are rendered):
https://threejs.org/examples/webgl_sprites
The idea is to render them with a separate orthographic camera and an additional call of WebGLRenderer.render(). Besides, instances of THREE.Sprite do support raycasting which is of course useful when implementing interaction.
Building up on Mugen87's answer, you can also use THREE.Shape to make visual containers adapted to the user screen size :
https://threejs.org/docs/#api/en/extras/core/Shape
You can use THREE.Shape to make mesh-based text, is illustrated in this example :
https://threejs.org/examples/?q=text#webgl_geometry_text_shapes
You should also have a look at three-mesh-ui, an add-on for building mesh-based user interface with three.js :
https://github.com/felixmariotto/three-mesh-ui
I would like to recreate bent country labels according to the area of the country.
In d3 (or SVG) I can construct a polyline and then use a textpath to have text along it. Example: https://www.w3.org/TR/SVG2/images/text/text-path-startoffset.svg
Is it possible in Cesium to do something similar?
In Leaflet it is implemented like that: http://makinacorpus.github.io/Leaflet.TextPath/
There's no native support for that in the current version of Cesium. It may be mentioned on a wishlist or on a roadmap somewhere, but there are no short-term plans that I know of to add it to Cesium.
Even so, you may be able to find a workaround. For example, SVGs can be used as texturemap image sources in Cesium, so you could possibly use D3 to produce curved text on-the-fly and load the results into a Cesium billboard image or even a Cesium Globe inlay image. It would probably take some experimenting to figure out how to actually wire this up and how well it would work.
I am using Flot to plot images for our project. For pre-defined shapes like line, pie, I can add tooltip through flot.tooltip.
However, we have some images that are drawn through Html5 canvas API, such as Here. I would like to add a tooltip for the red rectangle and another tooltip for the blank area. Any library to make it work?
With canvas there isn't a good way to detect when the mouse hovers over a particular drawn item; it's just a buffer, with no idea of what operations were used to draw into it. Flot's own hover detection has no concept of what was drawn on the canvas; it just knows that, e.g. the pie starts at a particular point and extend outwards a certain number of pixels.
So no matter what, you will have to write a function that accepts a mouse event, examines whatever data you used to draw the image, and decides what that corresponds to.
Where Flot could help is in providing a way to override the built-in hover function with your own; then the tooltip plugin would simply work with your function. Since you can't currently do that, you have a choice of a) modifying the tooltip plugin to use your function, or b) registering your own mousemove listener on the overlay element, which then generates 'fake' plothover events for the tooltip plugin to consume.
I'm looking into making a jigsaw game using html5 canvas and JavaScript. I have the images(pieces) in place, and they are draggable, but I'd like the pieces to act like they are on a grid so that when you click and hold while dragging an image it can only be placed on certain tiles within the 3x3 grid.
A similar question was asked on Stack before but the only response pointed to a drupal module and I'm not using drupal. I found one more similar solution online that uses Asp.net but I'm hoping to solve this all on the front-end, and if I have to use some server-side code I only know PHP.
The renderGrid function for canvas it seems, just draws a grid, but doesn't make it functional for snapping objects to certain places.
Does anyone have clues on how to do this?
Use divide/floor down math when setting coordinates. E.g. to space x for each 24 pixels:
var gridx = Math.floor(x/24)*24;
I'm setting up an experimental html5 website using canvas.
I am drawing 3 circles all next to each other and all I want to know is how to be able to select them.
I'd like them to become links, in a way. Not tags, since everything's gonna be created using javascript.
Something like kinetic JS : http://www.kineticjs.com/, but without the extra library.
I have found some scripts that are using ghost canvas and contexts, but the examples are for dragging and stuff. I only want to be able to select my shape and execute some code.
Thank you!
I am thinking you might want to look into the IsPointInPath() method. It will help you figure out whether or not the mouse clicked on your canvas object.
See Detect mouseover of certain points within an HTML canvas?
if you are talented in xml i suggest you to use canvas + SVG (http://www.w3schools.com/svg/)
And follow this simple example.
http://jsvectoreditor.googlecode.com/svn/trunk/index.html
regarding to SVG and Canvas , the differences are obvious, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.