I have been searching for quite a while but I found nothing, which really helps.
I want to clip an Image with multiple custom shapes.
Is it even possible to clip an image multiple times ?
I want for example three hexagons, which aren't connected to each other and in which the
Image is visible.
Is it possible to clip the image with a custom shape like a hexagon or so ?
I would really appreciate any kind of help !
Thanks
You could use an SVG path as clip-path. See https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content#Example.3A_Clipping for an example.
Related
I'm working on a canvas-based heatmap using a library called simpleheat (https://github.com/mourner/simpleheat). I've got the heatmap effect working, but does anyone here know how I'd be able to achieve a glow affect like the image below? I've tried implementing this effect with Pixi filters, but haven't had any luck so far.
If you do this manually, or point by point based on xy coordinates for a map that you might have, you could just make a canvas overlay for the map and then draw points on the canvas as overlays. I think you can also set the canvas colors as rgba to make them slightly transparent.
(srry i was gonna make this a comment but i dont have enough reputation for that lol)
hope this helps
Please first take a look on this picture : https://docs.google.com/file/d/0By25CEM_KEOiYzdYaWVicnp6Zm8/edit?usp=sharing
Now i want to make something like that but i want to put d3.js elements on a slider like that instead of images like a rectange, circle, square, triangle so that user can move them with arrow buttons shown in the image.
I just wanted to know if it is possible with d3.js and if Yes, please tell me how or from where to start?
You could make something like that using D3.
One way you could do it is to draw the tiles as rectangles using SVG and then have a clip path that hides the tiles that are outside of the frame of what you want to see. The left and right arrows would update the xScale domain which would slide the tiles left and right. And, you can register click events on the rect elements to create links on the tiles.
See this for some ideas on how to start: http://bl.ocks.org/mbostock/1667367
If you aren't already somewhat familiar with d3, you should probably start with a basic tutorial like: http://mbostock.github.io/d3/tutorial/bar-1.html before you dive into the deep end.
I want to create a mapper (like mindmapping) with KineticJS and JQuery. But I didn't find how to begin with KineticJS. Actually, I only need some example to draw a box (some shape) in the middle of the page with just one arrow.
Any help will be appreciated.
You can do arrows with paths :
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-path-tutorial/
You can also do that with polygons :
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-polygon-tutorial/
And to draw a box, you simply have to draw a rect :
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-rect-tutorial/
The KineticJS documentation and tutorials are very simple to use.
Hope it will help.
Im trying to connect two shapes using the path by dragging the mouse from one shape to the other.Is this possible in Rapahael?If some one has already done this a lttle help will be much appreciated.
Im looking to do something like below.I want to be able to drag my mouse from the grey shape to other green shape and connect them using a path
Thanks
i'd approach it like so:
create a set to hold the shapes once they're joined.
assign a drag() handler to the desired element, to push it to the set upon dragging (with certain constrains, obviously - if shapes are intersecting or other conditions).
treat the set (now containing several shapes) as the new shape, as Raphael's set API allows precisely this by providing an opaque interface to the contained shapes inside the set object.
i hope this helps, for any questions or clarifications on this, please comment. i'll try and manifest another approach for a solution, and see if i'd come up with anything.
I have been trying to find a good resource to point me in the correct direction and I'd really like someone to help me in this regard.
I'm developing an app that uses phonegap, js and html5. One component of this app is to have an image that can be overlayed with freeform scribbles.
I'm not sure if its the canvas object I should be using and if so how do I go about implementing a drawing solution.
You create a and position it absolute over image.
can have transparent pixels (alpha=1.0) and those pixels will display the underlying image.
Then you flip pixels accordingly your scribbling to black etc. You need to listen to touch events, transform their coordinates to coordinates and then use canvas.getContext() draw operation to manipulate pixels hitting in those coordinates.
If you need further assistance please ask individual questions for each part as a complete solution would be longish source code and outside the scope of simply answering the questions.