English
资源说明：Radio Button Canvas is an unusual (and totally useless) jQuery plugin that creates a matrix of radio buttons.
= Radio Buttons Canvas
Radio Button Canvas is an unusual (and totally useless) jQuery plugin that creates a matrix of radio buttons. A blank canvas looks like this:
http://coryschires-blog-post-images.s3.amazonaws.com/radio_button_canvas/blank.png
All tightly packed together, you can think of the buttons as pixels which you can use to create simple animations, pictures, and even games. You can see a few examples on the {demo page}[radio-buttons.coryschires.com].
I'm working on a basic API which makes creating your own radio-button projects quite a bit easier. It's still pretty rough and minimally-featured. Any contributions would be great, so feel free to fork it and mess around.
Note: This plugin is still being actively developed. The API will almost certainly change rapidly and without notice. I wouldn't recommend using it for anything important -- though I'm not even sure that's possible.
== Getting started.
Obviously, you'll need to include the necessary scripts in your head element:
Next, you need initialize your radio button canvas. It's pretty simple. Call it like any other jQuery plugin, but be sure to store the returned value in a variable. We'll need it later.
var canvas = $('#canvas').radio_button_canvas();
You can also pass configuration options to specify the canvas width or height:
var canvas = $('#canvas').radio_button_canvas({
width: 500, // defaults to $(window).width(),
height: 350 // defaults to $(window).height()
});
After creating the canvas you have a lot of flexibility to draw whatever you like. However, I've included a really basic API to help speed things along. For example, let's add a point to our canvas:
var canvas = $('#canvas').radio_button_canvas(); // call the plugin canvas
canvas.point(5,5); // create a point
And then we have a point:
http://coryschires-blog-post-images.s3.amazonaws.com/radio_button_canvas/point.png
You can also draw lines:
canvas.line(2,2, 8,5);
Which produces:
http://coryschires-blog-post-images.s3.amazonaws.com/radio_button_canvas/line.png
Also, all methods return something sensible to allow chaining. Points, for example, return self allowing you to do things like:
canvas.point(5,5).move('north').uncheck();
All shapes, such as lines, return an object which contains the array of points that constitute the shape. Shapes come packed with a bunch of methods which allow you to manipulate the entire shape at once. For example, let's draw a line and slowly move it eastward across the canvas:
var line = canvas.line(2,2, 8,5); // draw the line
setInterval(function() { // move it east
line.move('east');
}, 200);
There's the basic idea. Now let's look more closely at the API.
== Points.
Create a point by specifying an x and y:
var point = canvas.point(5,5); // arguments => x, y
When initialized, a point comes checked by default. Here are some basic methods for checking and unchecking points:
point.check(); // returns self
point.uncheck(); // returns self
point.is_checked(); // returns boolean
It can sometimes be convenient to fetch a point's coordinates. You can do that using the coordinates function:
canvas.point(3,5).coordinates(); // returns [3,5]
You can also check if a point is equal to another point using the equals function:
var another_point = canvas.point(3,5);
canvas.point(3,5).equals(another_point); // returns true
You can find other points relative to an existing point using the neighbor function:
// using ordinal coordinates
point.neighbor('north'); // always returns neighboring point
point.neighbor('south');
point.neighbor('east');
point.neighbor('west');
// using cartesian coordinates
point.neighbor(0, -2); // returns point two north
point.neighbor(1, 2); // returns point two south and one east
Finally points have a move function. This takes the same arguments as the neighbor function:
point.move('north'); // moves the point up one
Under the hood, in fact, move uses neighbor to do the heavy lifting. Unlike neighbor, however, move unchecks the current point before moving to a new location.
== Lines.
Create a line by specifying the start and end point:
canvas.line(2,2, 8,5); // arguments => x1, y1, x2, y2
Lines, like most canned shape functions, return a shape object. This gives lines both a points and move function. Check out the shapes section below for more to see how you can use these functions on lines.
Do keep in mind, however, that the radio button canvas is, well, low resolution. This means that short lines with gentle slopes don't work so well. For example:
canvas.line(2,2, 8,3);
Creates a pretty pathetic line:
http://coryschires-blog-post-images.s3.amazonaws.com/radio_button_canvas/bad_line.png
== Rectangles
Create a rectangle by specifying the coordinates for the top left point and the bottom right point:
var rectangle = canvas.rectangle(2,2, 8,6); // arguments => tlX, tlY, brX, brY
Which creates:
http://coryschires-blog-post-images.s3.amazonaws.com/radio_button_canvas/rectangle.png
Like lines, the rectangle function returns a shape object allowing you to call any methods generally available to shapes. For details, see the shapes section below.
== Polygons.
The polygon function provides an easy way to create various such triangles, diamonds, and so on. Make a polygon by specifying the vertices as either arrays of coordinates or points:
var polygon = canvas.polygon(
[2,4], [6,2], [8,6], point(6,8)
);
Which creates:
http://coryschires-blog-post-images.s3.amazonaws.com/radio_button_canvas/polygon.png
Like lines and rectangles, the polygon function returns a shape object giving you access to any shape functions. For details, see the shapes section below.
== Shapes.
Shapes are the hardest working and most flexible objects on the canvas. You can create a shape simply by specifying the constituent points as arrays of coordinates:
var face = canvas.shape(
[3,2], [4,3], [5,2], [2,4], [6,4], [3,5], [4,5], [5,5]
);
And you'll get:
http://coryschires-blog-post-images.s3.amazonaws.com/radio_button_canvas/face.png
But specifying every single coordinate can be a bit onerous. So you can also compose shapes form other shape objects -- like lines, rectangle, or other shapes. For example, let's add a few more points to our face:
var happy_man = canvas.shape(
face, // the shape we just created above
canvas.point(3,6), // notice you can pass point objects too
[3,7], [4,6], [5,6], [5,7] // and you can pass coordinates as before
);
And you get this exciting fellow:
http://coryschires-blog-post-images.s3.amazonaws.com/radio_button_canvas/happy_man.png
Using the points property, you can easily get an array of all the points that constitute a shape:
happy_man.points; // returns a bunch of point objects
You can also call move on a shape which takes the same arguments as the point move function described above:
happy_man.move('north'); // moves one step north and returns self
And then things get totally awesome:
var party_time = function() {
happy_man.move('south');
setTimeout(function() {
happy_man.move('north');
}, 100);
}
setInterval(function() {
party_time();
}, 300);
http://coryschires-blog-post-images.s3.amazonaws.com/radio_button_canvas/party_time.gif
I'll still improving the API, adding new shapes, etc. If you need a more in depth explanation of the existing objects, check out the {unit tests}[https://github.com/coryschires/radio-buttons/tree/master/spec]. They do a fairly good job specifying the code.
== Things to do.
* Shapes can currently have redundant points. That should not be allowed.
* Add .fill() / .unfill(); methods to shapes class.
* Finish demo page
* Should lines and rectangles be able to accept points are arguments? Currently they can only accept x and y coordinates.
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
