Sam,
Yes, some thing like that would be great. It would also be nice to
handle arrays of locations without the 'px' so it is easy to do math on
them.
// place a circle at the center of some container
$("#container").drawShape("circle", { origin: "centre", radius: 30})
// draw a circle
$("#container").drawShape("circle", { origin: [5,8], radius: 30})
// draw multiple circles and style them all the same
$("#container").drawShape("circle", { origin: [[5,8],[30,45],...],
radius: 30, style: {color: "red", opacity: .5, border-color: #900,
border-style: "solid"}})
// draw a polyline
$("#container").drawShape("line" { path: [[5,8],[30,45],...], style:
{color: "red", line-style: "dashed", lineWidth: 2}}).bind("mouseover",
function(e){alert("I'm a line");});
I also think there is something to be said for creating shape objects like:
var redcircle = {
id: "circle01",
type: "circle",
x: 5,
y: 8,
radius: 30,
style: {color: #f00;},
};
var bluecircle = {
id: "circle02",
type: "circle",
x: 5,
y: 8,
radius: 10,
style: {color: #00f;},
};
var shapes = [];
shapes.push(redcircle);
shapes.push(bluecircle);
// add to circles, then hide the larger
$("#container").addShape(shapes);
$("#circle01").hide();
or
// add two circles (nested), then hide both of them
$("#container").addShape(redcircle);
$("#circle01").addShape(bluecircle);
$("#circle01").hide();
Anyway you get the idea.
-Steve
Sam Collett wrote:
> On 27/10/06, Stephen Woodbridge <[EMAIL PROTECTED]> wrote:
>> <snip> Since a lot of what I
>> do it maps and building apps on top of maps, I would really be able to
>> use some generic tools for drawing that are fast, cross browser and
>> capable of handling more than a few dozen points or objects.</snip>
>
> So I guess what you want a a shape drawing plugin? That could be
> useful and I could imaging a syntax similar to this:
>
> // draw a circle in the centre of #container
> $("#container").drawShape("circle", { origin: "centre", radius: "30px"})
>
> // draw a circle in the 5px from the left and 8px from the top,
> cropped when it reaches the edge (so you get a partial circle)
> $("#container").drawShape("circle", { origin: {left: "5px", top:
> "8px"}, radius: "30px" })
>
> // draw a rectangle in the centre
> $("#container").drawShape("rectangle", { origin: "center", width:
> "30px", height: "35px" })
>
> Other shapes could perhaps be added as well (triangles, trapezoids
> etc). Some shapes are under several categories (a square is a
> rectangle and a rohmbus). However, I have no idea how to implement
> something like this.
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
