I want to draw a dynamically generated line that bends around n points in php, depending on input. I know I could use image arc and painstakingly get the curves to overlap at the proper angles so that multiple curves give the illusion of a single bendy line. But is there is an easier/cleaner way?
I basically want to do this:
If you wish the client side to render this I recommend using the canvas tag
See reference here: http://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/
Or use imagemagick backend if you with the server side to do it
look up Bezier Primitive on page http://www.imagemagick.org/Usage/draw/#bezier
You could use ImageMagick to create an image of the output you want. I've always found it pretty straightforward.
eg
http://imagemagick.org/Usage/draw/#bezier
http://php.net/manual/en/imagickdraw.bezier.php
Related
Does anyone know a way to programmatically create a cold/warm front vector given a list of vertices (note the vertices do not contain the little triangles or half circles; [-105W, 40.45N],etc...)?
I'm trying to drop a "Current Front Positions" overlay on a web mapping application.
I was hoping to use PHP, Python, Javascript or even a map server to accomplish this task, but wanted to see if there were any good suggestions of where to start.
For Python;
You would have to capture the image first, e.g. using the Python Imaging Library. You could use its ImageDraw module to draw lines and arcs on the image.
If you want to draw (Bézier) curves, you would need to find a library that can handle those. E.g. cairo, with the py-cairo bindings.
I want to have a map (which is image-mapped) show green in areas where some criteria applies, yellow in some other areas and red in other areas.
The goal is to display a clickable image which will will colour certain states which match certain criteria. I was previously considering flash but the owner simply doesn't want flash. One possible alternative would be to display 'clickable' coloured labels on the map but I don't know how to do this either. Does anyone know how I can solve this? Any help will be much appreciated. Thanks!
Check out Raphael: http://raphaeljs.com/
So this is what I finally did.
I found an svg map of Nigeria on wikipedia (which has the svg maps of
almost every country).
I downloaded InkScape and cut out the parts I didn't need from
the map.
I used the Raphael SVG to HTML Converter tool to convert it to
code usable by raphael.
From here it was quite very easy, I could use path.fill to 'colorify'
the image and it was easy to set different functions for clicking any
part. Scaling was also not an issue as the image could be scaled
dynamically based on the container.
Thanks to everyone especially Olle for pointing me in the right direction!
jQuery Vector Map http://jqvmap.com/
or
JVectorMap
JVectorMap comes with more pre-generated maps than jqvmap. But you should be able to generate your own.
Take a look at jQuery. PHP is not where you will do this, its going to be client side Javascript to manipulate an html image map using either overlay images or a change in CSS via the Javascript.
For what its worth, this can be done in php using the gd extensions. Essentially what you do is load an all white version of the image, and then using coordinates on the image, fill the image with a given color using imagefilltoborder (http://www.php.net/manual/en/function.imagefilltoborder.php) .
However, to make it clickable, you would need to use an image map or javascript on the clientside anyway.
I can use GD or something to draw user-selected shapes by writing some lines of code, but is there a library that is already taking care of it?
There are just 4-5 shapes that a user can select and text needs to be placed too.
If you want I think you want (to draw in browser without using server side scripting) check this article out, perhaps you will find what you need:
10-jquery-drawing-plugins
Enjoy!
is it possible to create this image in PHP using GD ? i know i need to use GD and imagecreate, imagecolorallocate, imagedestroy etc... but i have no idea how to do the curve
i need to create multiple arrows with these patterns
different type of arrows
different inclination of the curve
different colors
different length
edit: this way i don't have to look on the internet for arrows (based on a user/client specs). and then later i will add text to the image (for example: click next or follow the arrow). since im not a graphic designer, creating these iamges using gd will be easier for me.
eg:
http://kennebecvalleycoaching.com/red_arrow_curve.JPG
http://s3.amazonaws.com/satisfaction-production/s3_images/13664/curved_inline.png
thanks
Instead of doing it server side, you could investigate things like canvas, or raphael, and create the graphical elements clientside. It will be much more flexible, and less hassle.
I am looking to achieve:
http://i53.tinypic.com/2gule04.jpg
I have tried the answers mentioned at Curving an image that starts as a rectangle (uploaded by user), preferably using Canvas or JS
Based on the answers there, I have tried pixel wise transformation which didn't work. To understand a mesh based approach, you will need a skill set of 3d-2d developer which I don't possess.
I am a PHP developer and I am looking for an answer in either PHP or HTML5. I have tried number of things ranging from HTML5 canvas to splitting the image into smaller parts and then joining them however those don't seem to work.
A help in the right direction will be greatly appreciated.
If you can use ImageMagick, the Circular and Radial Distortion Methods examples should come pretty close.
I don't know whether the PHP ImageMagick extension (as opposed to calling ImageMagick from the command line) supports this as well, but it might.
To achieve a similar effect you want to try texture mapping and you need some 2d-3d subdivision and math skills. Basically the idea is to subdivide the texture in triangles and map them to the 2d coordinate using a transformation matrix. It's simplier to start with rectangles first and then use your curved form but I'm new to this too, so I don't know really if texture mapping is used at all to curve an image. Here is an example of a simple texture mapping: Image manipulation and texture mapping using HTML5 Canvas?.
In the aforementioned link there is this sub function:
n the following code I assume you have a picture object texture and 4 corners each of
which is an object with fields x,y,u,v where x,y are pixel coordinates on the target canvas and u,v are pixel coordinates on texture:
IMO this is information enough to start with texture mapping.
A posibility is to use rotoscopic animation instead of mathematical tweening. In other words, you can achieve such transformation with 5 or 6 (or as many as you want) frames that are sequentially drawn on the HTML5 canvas at your desired frame-rate.
You can easily draw each frame using Canvas native API. In your case, you just need to draw Text and then a closed path like:
ctx.beginPath();
ctx.moveTo(...);
ctx.arc(...);
ctx.lineTo(...);
ctx.arc(...);
ctx.lineTo(...);
ctx.closePath();
and just adjust the corresponding values for each frame.
It should be pretty easy!