I would like to create a circle container that is transparent - revealing the background underneath, and populate with other elements that are not transparent. I would like the elements in the container to be clickable. What is the best way to achieve this with Easel/Create js?
Related
According to this link, it is possible to modify a SVG, depending on the parameters included in the URL used to access this SVG.
Is it possible to do so using the toSVG() method ?
Let's say I create a basic canvas with a few elements. Once I'm done, I export and save the result of my canvas.toSVG() on AWS.
I get this image
Is it possible to modify the way toSVG() behaves, so that adding ?color=red at the end of the URL would make my tshirt red ?
I tried using the example from the documentation, using replace() on my canvas objects, but this generates empty SVGs.
Is it possible to specify particular layers/elements when using toSVG ?
I have a canvas with both an overlayImage and a backgroundImage, and I would like to extract the svg for every other element added to the canvas.
So far my only solution was to set opacity to 0 for both background image and overlay image then apply toSVG, and finally restore opacity to 1, but I assume there probably is an easier way to achieve this.
Yes you can set "excludeFromExport" property on overlayImage and backgroundImage for exclude from toSVG, toJSON
excludeFromExport
Is there is any way to magnify fabric js canvas objects magnify?
I have tried with help of so many examples but mostly magnify the image only, i need to magnify any objects present in canvas like rect, circle, text, image
I am new to jointjs. I am working with shapes as instances of joint.shapes.devs.Model and am trying to replace the circle, representing an in/out port with a custom image. I would like to keep the current functionality where it is possible to create a new arrow by dragging the circle, snaplinks, and the rest of the great functionality offered by JointJs. The only thing I would like to do is to replace the magnet/inPort/circle with an image. Is this possible? If so, how?
Regards
It is indeed possible. The best way would be to look at how the joint.shapes.devs.Model is defined here: https://raw.githubusercontent.com/clientIO/joint/master/plugins/shapes/joint.shapes.devs.js and create your own custom shape that has the SVG <image> element in the ports instead of the current <circle>.
I'm working with nokia HERE maps and I want to add an additional layer of visualization graphics on top of a map. Since the possibilities to interact, manipulate and customize the graphics created by the HERE api are limited, I would like to work with d3.js/SVG for my visualizations.
My straight forward and obvious solution would have been to just add an absolute positioned SVG element on top of the map and giving it the same dimensions. But of course that takes every possibility to interact with the map. Is there any solution to add an overlay to the map which allows me to put SVG on it while maintaining the full interactivity (panning, zooming, clicking) of the map? Also it should be possible to interact with the SVG.
I know that there is a possibility to add a custom overlay of tiles provided by a tile server to HERE maps but that's not really what I'm looking for. I'm looking for something like the solution google has to offer to this problem. A set of custom layers which are always in sync with the corresponding map and have their own initialize, draw and remove methods. Is there something similar for HERE maps?
I think you are after the nokia.maps.map.provider.CanvasProvider class. This class provides a ground overlay bound to a specific area which offers a draw() method. The attach() method is the equivalent of your intialize I think, and you can refresh the overlay using update().
Depending upon your use case, I've also found the following techniques useful regarding SVG, Images and HERE Maps:
For an SVG marker which is anchored to a point and doesn't resize
use: SVG Markers
Alternatively override the Marker class and write using the low
level graphics commands to add flexibility to the rendering of a
marker anchored to a point. Like this: Defaced Marker
To add an image bound to a specific area use the ImageProvider class
To add a series of tiled images from a TMS (Tile Map Service) use the ImgTileProvider class
Alternatively if the [zoom][col][row] is useful to you and you
want to write SVG based stuff yourself try something like this example - which combines
SVG with 256x256 pixel markers.
Note that the HERE Maps API for JavaScript only supports SVG Tiny.
A class like the old nokia.maps.map.provider.CanvasProvider isn't even available on the new v3 API from Here.
Your best bet is on Leaflet using custom providers loading Here map tiles. Then you just load this Custom Overlay class and you're all set to draw D3, WebGL, whatever you need. Leaflet only loads the tiles from the providers and exposes some simple APIs. You will not have to deal with any of the providers' APIs.
Just don't forget to add your app_id and app_code to the provider class.