2013-02-05 14 views
7

Tôi đang cố gắng xây dựng một ứng dụng mà mọi người có thể tải lên hình ảnh và tôi muốn làm cho mọi người có thể kéo các góc của hình ảnh và bóp méo nó. Nhưng tôi không biết phải bắt đầu từ đâu và tôi không thể tìm thấy bất kỳ ví dụ nào.Canvas Image resize/scew/dnd

tôi có một ví dụ trong flash: http://configurator.cando.eu/popup.html
- Nhấp vào "Cando Stijlkamer"
- Click vào 1 trong tổng số 6 nền
- Trên chọn bước đầu 2 "Kies uw Deur"
- Double click cánh cửa, và phía dưới làm lại.
- Bây giờ bạn có thể kéo các góc.

Ví dụ hình ảnh: Distort image

Bất cứ ai cũng biết làm thế nào để làm cho điều này có thể?

CẬP NHẬT
Bắt đầu sử dụng ThreeJS cho WebGL, tại thời điểm tôi nhận được một khối lập phương, có thể làm cho nó quan điểm, quy mô và scew nó. Nhưng góc sẽ không linh hoạt.

CẬP NHẬT 2
Tạo hình học tùy chỉnh với các góc có thể kéo được.

+6

Thực hiện các hiệu ứng méo theo thời gian thực như vậy trông giống như trường hợp sử dụng cho WebGL. – Philipp

+0

@Philipp: +1 để chỉ cách xa canvas hoặc svg vì ma trận chuyển đổi 3x3 của chúng sẽ không hỗ trợ biến dạng không song song. – markE

+0

Giống như @Philipp cho biết đó là điều dành cho WebGL. Câu hỏi của bạn trông giống như: http://stackoverflow.com/questions/10660521/html5-canvas-drawimage-using-points kiểm tra điều đó. – MarkSmits

Trả lời

2

Tôi có thể chỉ cho bạn cách bạn có thể thực hiện hiệu ứng này rất dễ dàng trong Flash. Tuy nhiên, nếu bạn cần sử dụng HTML5, tôi sẽ đề xuất https://github.com/edankwan/PerspectiveTransform.js thay vì phần tử Canvas.