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
Related
I am working on some project basically for the real estate and kind of stuck in some feature where I need some help.
I have a 3D scene ready using three JS and rendered on screen, but sometimes the user wants to see in 2D and sometimes in wireframe.
see images below
one way to do is to keep the camera at top of the 3D view and make model wireframe true.
but I am looking for the alternate way to convert a 2D image of top view into the structure like above. Is there any library or method that can help in solving this.
Thanks
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.
I'm wanting to find a javascript library that will create images of simple 3D shapes like the ones shown below.
The key is that I want to be able to specify certain attributes of the shapes. So, take a cylinder, for example. I'd want to tell the library the radius and the height and have it create the cylinder for me.
Does anyone know of something that can do this?
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
I created a shape in canvas and want to drawn an image in it.
So far I can clip the image to the shape but I want the image to adapt it self with the Free Transform -> Distort effect or something similar.
In the example:
The image on the left is the clipped one.
The image on the right is the original.
The bottom image is the result I want to achieve.
The code can be seen here: http://jsfiddle.net/NAe9c/
The code result can be seen here: http://www.tribalddb.pt/final.jpg
edited:
Thank You all
I accepted that answer to this issue but I found another alternative to my problem, CSS 3D.
I didn't know it until now =P
Yes, you can draw things flat and have them rendered in perspective. You can't do it simply with a 2D transform so there's a bit of math to the ordeal if you want to use the 2D context but nothing insane.
I'd suggest doing a search for "canvas perspective transform" and you'll find a lot of demos, like this one:
http://tulrich.com/geekstuff/canvas/perspective.html
You will need to do perspective correction for something like this, I think it would be easier to get a library to do it for you, have considered using:
Three.js