How can I fill a polygon with a texture using svg? - javascript

I'm currently using svg.js - but I am very welcome to alternative suggestions - is there any way I can create a polygon and then apply a repeating texture to it?
Below is an example of what I am attempting to achieve. Here is a jsFiddle which shows my best attempt. This works, but the image doesn't repeat so if you increase the size of the polygon the effect is lost.
I'm creating an image, and then two polygons. One for the shape and another for the shadow. I then mask the image with the polygon.
image.maskWith(polygon.fill({color: '#FFF'}));
The idea is that instead of creating many different shaped, coloured and textured PNG's we will be able to create one texture and use svg.js to adjust everything else.
Thanks in advance :)

This is what the <pattern> element in SVG is for. Mozilla documentation.

Svg.js has a pattern plugin. Usage is very simple:
var pattern = draw.pattern(20, 20, function(add) {
add.image(20, 20)
})
var circle = draw.circle(200).fill(pattern)
I only need to mention that patterns in Opera sometimes render black. I still need to find out why that is.
UPDATE:
The latest release of svg.js (1.0.0-rc.4) supports direct a fill with an image url or image instance:
var circle = draw.circle(200).fill('/path/to/image.jpg')
More info here: http://documentup.com/wout/svg.js#syntax-sugar/fill

Related

How can I do a generated image on a website?

I'm trying to figure out how to make a website image, just some little blob of color without actually creating an image and putting an image tag and all of that. Is it possible?
Would I be drawing it with CSS, Javascript, or HTML5? If drawing it on the fly with something like Javascript, is that something that is a good idea? drawing over and over?
Not sure where to start looking? Thanks for any help.
Here is an example of an image I'd like to make: https://dl2.pushbulletusercontent.com/0P1OxQU6AoPT5LnWG3jROJgEmdWoPKUw/image.png
SVG is a good choice. It allows you to use a document structure, much like that of HTML, for vector graphics. The <rect> element makes a rectangle. For more complex shapes like your example, check out paths. More info here: Rounded corner only on one side of svg <rect>
Vector graphics are easy to generate and manipulate programatically. They can also be sized and scaled without pixelation.
If you need complex filtering or want raster graphics instead, a Canvas element and its 2D drawing context are a good choice.

Transform image on canvas based on 4 points

I have a small application that uses Paperjs to render an image between four points.
The user should be able to drag these four points freely.
It would be nice if the image inside automatically transforms into this given tetragon, like on the picture below.
Do you know a library that is able to help me with this job?
Of course Paperjs is able to apply a matrix transformation, but is there a “simpler” solution like:
Image.transform(point1, point2, point3, point4);
Just like this ActionScript demo, but in Javascript with canvas:
http://www.rubenswieringa.com/code/as3/flex/DistortImage/
Thank you!
This d3.js codesnippet did the job for me:
http://bl.ocks.org/mbostock/10571478

Kineticjs - Creating own line style

I am working on an image editor with kineticjs. So it's time to make nice brushes. I would like to use png images for this with a different set of alpha values for each pixel, depending on the brush type, and changing the color once they are added to the layer.
I would like to know, how can I achieve this? I made a simple painter following the answer to this question But what I want is to reduce the opacity in some parts of the shape that we use as base for painting lines, like in this image. Notice that the first and the last are the same, just the opacity in the last is less. Thank you.
The stroke of a Kinetic.Line cannot use a fillPattern (it's a stroke without any fill).

Hovering over different segments in a circle

I am currently trying to create a blue, circular, pie-chart-esque image for my website. The circle will be split into 6 different segments.
What I want to happen is that when the user hovers over a particular segment, this segment will turn orange, and some text will appear beside the circle corresponding to that segment.
I have found some resources online which achieve nearly the effect I need using CSS image maps. http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/ However, these techniques split up an image using rectangles. If I were splitting up a circular object I would prefer to split up the area based on particular arcs.
I assume this is beyond the reach of pure HTML and CSS. I do not have a great deal of experience with web languages, although I have had passing experience with JQuery. What are the techniques I need to solve my problem and what technology would be best to implement it?
you can create image maps that are not rectangular, but use polygon shapes.
this useful tool http://www.image-maps.com/ will let you achieve what you are looking for, without having to write your own polygon mapping!
A few options:
HTML image map
It's simple to create an HTML image map that comes very close to the shape of each slice of the circle, but there are limitations to HTML images maps. For instance, you can't nest content inside each slice of the image map (as an easy way to implement a hover pop-up). If an HTML image map is adequate for you, it's the simplest solution.
CSS image map
To define circle-slice shapes, a CSS image map is impractical, unless you only need a very-rough approximation of the hotspots for each circle slice. But if you could live with that, you'd have a lot more flexibility as far as the functionality.
onmousemove
You could also get the mouse coordinates with an onmousemove event handler for the entire circle, and then do your own calculations to determine which circle slice the mouse is in. This allows you to accurately define the hotspots for each circle slice, and you'd have more flexibility than with an HTML image map. But the calculations may take a little work.
I have a solution for this using mainly HTML and CSS with a tiny bit of jQuery to handle the showing of the text by the side of the circle.
It does however use some CSS properties that are not very widely supported such as pointer-events
JSFiddle Demo

Can't scale multiple paths in Raphael?

I've tried using the current top Question on SO : Scaling multiple paths with raphael
...without much luck. I'm building a map of the USA through Raphael and while the map is very nice, I need it to be probably 30% the size it is currently.
I was able to change the attr on the initial Raphael canvas to ".5" but that only sized each individual path instead of the whole canvas. I have also tried using javascript to scale the div containing the canvas to no avail.
Paths: Actual Page:
http://praxxgray.com/am/rafe2/mapTest.html
javascript:
http://praxxgray.com/am/rafe2/js/initMap.js
I'm new to Raphael, but I have bosses breathing down my neck to get it working. The image beneath the Raphael map shows the size that I'm aiming for. I feel like I am close, perhaps I am calling the wrong object to be resized?
Help me Obi Wan!
Thanks!
Don't know if this'll help, and it's a bit off the cuff, but have you tried sticking your map in it's own raphael instance and then using Paper.setViewBox(...) to resize it?
var map = Raphael(100,100,800,500);
//
// draw my very big map, bigger than 800x500
//
map.setViewBox(100,100,800,500,true);
// doesn't change the size of the raphael instance, but will force the graphics to fit
// inside it.
setViewBox lets you alter the viewport. From the link - "Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by specifying new boundaries".
It might be a quick way to get what you want. It Raphael 2 only though :(
(This should work, but I haven't actually tested it. As I said, it's a bit off the cuff...)
Add the parameter viewBox and preserveAspectRatio to the SVG element. I tried adding these parameters, just to see if I managed to change the size, and I did.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 2500 3100" preserveAspectRatio="none">
More about the viewBox attribute here.
I came up with this jsfiddle. I'm using this in my own map with multiple regions. Works on IE6,8 & 9
http://jsfiddle.net/chrisloughnane/EUwRq/

Categories