Can I draw something like Wheel of Fortune using CSS? - javascript

I wish to draw a Wheel of Fortune using just CSS and jQuery. I don't want to use any images.
Also, I want to have at least 8 segments in the circle and properly align each text word vertically in each segment. Here's a photo to illustrate:
Once I have this working I then can use CSS3 rotate property.
Any idea how could I do this?

Here's a Spinning Wheel Demo done in HTML5 using Canvas: LINK
Direct download to the project demo files : ZIP
EDIT: Here is a different tutorial demo:
Creating a roulette wheel using html5 canvas

Here is another example of a spinning wheel using a Canvas

Check this link -> http://joelb.me/blog/2011/css-mask-tutorial-rotating-image-gallery/
It contains an introductory tutorial to somewhat you need. Check for the JS 2d Transformation library code at github too.

I created a roulette wheel using Raphael at: http://www.guesttime.com/members/ledlogic/roulette/index.html
It has the text rotated like you do, but you'd have to handle the centering for each letter.

Related

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

Fabric Js - Create rectangle around freehand drawing

I am working on a application in which users can create the following and write some comments for each Square they create. We are using FabricJs for create the following.
1) Square
2) Free hand tool
Once the user creates a Square, we are displaying a input control exactly at the bottom-right corner of the Square.
Now, the problem is where should I display the "Input" controls for for "Free hand tool"? One idea is to create another Square around the Free hand tool. Is there a way to get the height and width of the Freehand shape area?
Please help.
I am using Fabric Js for drawing the shapes.
Thanks in Advance.
Prawin

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

Is it possible to map letters to a cylinder or a sphere in CSS3 or Javascript?

I saw a picture mapped to a cylinder in CSS3 and I was wondering if this is possible with a text. Even better would be to map the text to a sphere. If it is not possible with pure CSS, Javascript could be an option.
It must run on all major browsers, also those not having the -webkit- stuff.
Thanks in advance.
As mentioned in the comments CSS3 only supports rotating and skewing elements, and doesn't have any support for spheres.
Although you can fake a sphere in SVG using something like Raphael.js, i don't think there's any real support for doing 3D stuff using Vector graphics. You'd have to map/wrap/skew the text yourself using some crazy math, and it still might not even be possible.
I think your only real hope is to use something like three.js to create an actual cube object. Then you could write your text to a hidden canvas element to get an image of the text, and map the image onto the cube as a material, as in this example.

Drawing Lines and Rectangle through mouse over an image using jquery

I implemented the copy image from clipboard to web page with the help of following tutorial :
http://joelb.me/blog/2011/code-snippet-accessing-clipboard-images-with-javascript/
Demo : www.pasteshack.net
It working properly.
Now I want to implement drawing shapes like lines, rectangles and circles over that image using jquery. I want it through mouse so that I can drag and drop it anywhere over image. The rectangles and circle must have to be transparent so that I can place it over image for identifying bug or fault in image.
Can it possible using jquery or javascript. Is there any plugin or tutorial available for it.
Thanks in advance.
Check the Following tutorial:
https://github.com/websanova/wPaint
It will definatly help you.

Categories