Raphael repeat background pattern - javascript

I would like to have a repeated pattern of squares (a little like a blueprint) as a background to the entire SVG element. I am using Raphael. How can I accomplish this?
I want to do this with SVG rather than images as I pan / zoom the SVG using SetViewBox and I would like the background to scale appropriately too.

One option is to render those squares the usual way, via paper.rect(). Might be expensive, though, and would take some maintenance if the canvas can grow in size.
The other option is to do a patterned fill, paper.rect(0,0,100,100).attr({fill: "url(images/pattern.png)"}); (see this tutorial), which should automatically repeat the image it is given. I haven't done that myself, though, so I'm not really sure how the pattern is scaled when you do SetViewBox().

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.

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).

Html canvas free transform

I am trying to transform a non-uniformed portion of image in a canvas element to a proper rectangle (ie. Like taking a non-rectangle portion of an image in photoshop and using Distort to make it rectangle), but am having difficulty understanding Canvas Matrix Transforms.
I am not after code, just a point in the right direction, in terms of understanding how I could achieve this.
Cheers
Update 1: Incase I didn't explain well enough http://i.imgur.com/QTB6q.png
Update 2: The those boxes are an area inside a photo which was added to the canvas, essentially I am cropping and straightening a portion of the image.
In html5 canvas you can apply only affine transformations using transform or setTransform() methods, so you need to know what is the matrix applied already and using the inverse matrix to make it look like a square area, for other transformations (non-affine), it is needed some math knowledge (that I don't have), create or search for an implementation for Canvas API (which works only with affine transformations).

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

Create something like this with CSS3?

http://raphaeljs.com/polar-clock.html
I'd like to create this without using SVC or Canvas. Can anyone point me in the direction of examples doing something similar with css?
Thanks!
Well, SVG certainly seems to be the correct solution to this (or canvas, but I would prefer SVG). And the Raphael script will even work in old versions of IE as it switches to VML in IE6/7/8, so if you're trying to avoid SVG/Canvas because of that then you don't need to worry.
But you're asking how to do it without them, so I'll see what I can do...
There are a number of people who have demonstrated drawing some quite complex shapes using pure CSS. See http://css-tricks.com/examples/ShapesOfCSS/ for example.
With pure CSS/HTML, the only realistic way to draw curves is using the border-radius style. A circle as per the example in the question could be achieved using a square element with border-radius, and a thick border.
Drawing concentric circles as per the question would involve numerous elements layered on top of each other, each styled similarly, but at different sizes.
Now the tricky bit. To turn them from circles into arcs is going to be harder. The only sensible way I can think of to do it would be to layer some more elements on top of the circles coloured the same as the background, to obscure part of the circle. We would need to use CSS transform to rotate them so that the angle of the cut-off was correct.
So it could be done.
Animating it (certainly as nicely as in the example) would be another order of magnitude more difficult, and I wouldn't want to even start thinking about it. Just give me the SVN any day.

Categories