Can't scale multiple paths in Raphael? - javascript

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/

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.

Three.js, click detection with a scaled container

I work on a little project where i have to create plane with mouse detection.
For moment i just make some test on a cube from a simple exemple found on the web.
The detection is good and accurate but the container has to be scaled when mouse wheel in order to make zoom.
(i also have to make a zoom on some images, the purpose is to superimpose images with some 3D forms in order to create an accurate detection on my images, these images are scaled with css transform so i guess the simple way is to do the same with the canvas container)
The problem come after scalling this canvas container (using css transform), the raycasting doesnt remain exact and i dont really know how to fix it, i tried to change some value but in a random way.
I guess there is something to do with the scale factor applied on the container but i dont understand which variable i have to modify.
I will try to scale the canvas using three.js directly and following the scale that i apply on my images but i dont know if that would be easier.
Here is my test : http://pixelreseller.com/src_pixelreseller/projets/three-test/
You can see code by the code source but if you prefer that i copy/paste code here, let me know.

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

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

javascipt:Need to smooth the the lines drawn on canvas

so i have been trying to work on a canvas sketching app. and i had this problem where the line drawn are very unclean. As you can see from image below.
then i tried this and got the below result which is what i desire.
But this created a new problem, the eraser function wont work. Now I've been trying to make this two work for sometime, but just could'nt do it.
So what i want is a new smoothing technique or a way to make the above two work.
BTW here is the demo without smoothing: http://jsbin.com/axarun/1/edit
and here is the demo with smoothing: http://jsbin.com/aviluk/2/edit
Thnx in advance.
Method 1:
You can "force" the canvas to use anti-aliasing by doing this:
ctx.translate(0.5, 0.5);
Force in quotes as this is dependent on actual implementation in the browser you're using. Currently there is no way to enable/disable anti-alias by intention.
Method 2:
Set the canvas to "high-resolution" by setting the canvas itself to double size, but force it to be displayed in the original size by styling the canvas element with CSS rules:
<canvas id="myCanvas" width="1600" height="1200"
style="width:800px;height:600px" />
Just remember to double your mouse-coordinates as well as pen-width. This will eat 4x more memory and performance, but will give you high-resolution lines (in appearance).
In this case the browser will treat the canvas as an image and apply anti-aliasing as it does for any scaled image, and not the canvas' method for anti-alias.
Please note that this is not the same as applying scale transform to the canvas.
See demo of "hi-res canvas" here:
http://jsfiddle.net/q2t5A/
Method 3-ish:
For actual smooth lines you can check out my function to do so here:
http://www.codeproject.com/Tips/562175/Draw-Smooth-Lines-on-HTML5-Canvas
This takes an array of x/y couples and smooths the line (cardinal spline). The lines will go through the original points and no control points are needed.
This will of course imply that you record the actual points, and when mouse up you redraw the canvas using the curve() function in this code. That would be a correct approach in any case, to record the strokes in an array and then redraw (this will also allow you to use layers). There are workarounds to avoid render everything by using off-screen
canvases to store f.ex. each layer. By drawing a canvas onto another with a small non-integer offset will force anti-alias (but see point 1).

Simple SVG drawing for HTML-JavaScript animation

I'm trying to draw a simple battery symbol in SVG which will be animated using HTML/JavaScript:
http://pastebin.com/utM4BTRS
I'd like to dynamically manipulate the mask over the "battery level" drawing inside the SVG but the mask is not displayed as drawn in Inkscape. Firefox and Webkit both display only a tiny bit of that part (no JavaScript involved yet):
http://tinypic.com/view.php?pic=deu44m&s=7 (Inkscape drawing on the left, Firefox rendering on the right)
Since I am new to SVG: what's the problem here?
Unless you need to use e.g gradients in the mask you should try to use clip-path instead. Actually, if you can remove the use of mask completely that's even better.
Now, to answer your question, you can remove maskUnits="userSpaceOnUse" from the mask element and it will work. Also you should save as "Plain SVG" from inkscape when exporting, it makes the svg output look a tad cleaner.

Categories