从单点拉伸/扭曲背景图像

Question

Usually when an image is being resized in javascript or css3(using background-size), it will stretch an image from the center point. I need an image to be stretched and distorted from a single point that could be anywhere. It's going to be dynamic so I don't want to resort to using separate images.

Here's a pic that illustrates what I mean:

Hopefully there's an answer out there!

Answer 1

You have a few options to achieve this effect.

The "correct" way would be to use canvas to draw the image: Skewing images individually using canvas

Another way would be to fake the effect using the CSS transform skew. http://developerdrive.com/demo/skewing_elements/skewing_elements.html

You would do this inside an element with "overflow: hidden" to make it look like a background image.

Answer 2

It's not even clear to me what you want from the image you're linking too. Do you want it distorted or not? And is the distortion uniform?

I'm going to guess whatever you're doing can be approximated by drawing an ever decreasing set of (or maybe rectangles) clipped from the center of a some image and drawing them onto a "canvas" (think generic term not html5 term) given new coordinates for the center of each clipping. There may be a faster way to draw this than redrawing parts of the image multiple times, it's just how I visualize it possibly working.. at least maybe in some mathematical sense.