Làm cách nào để thêm lần nhấp và kéo để chia tỷ lệ hình ảnh trong SVG?

Tôi muốn cho du khách chia tỷ lệ ảnh bằng nhấp và kéo:Làm cách nào để thêm lần nhấp và kéo để chia tỷ lệ hình ảnh trong SVG?

<html> 
    <body> 
     <svg> 
      <image>

Có một thư viện JavaScript sẽ giúp tôi?

tôi nhận thấy Raphael has click and drag phương pháp nhưng tôi vẫn sẽ phải viết rất nhiều JS để:

Tìm các góc của hình ảnh
Hãy khu vực gần các góc thể lựa chọn
biểu tượng Draw cho các góc nên rõ ràng chúng có thể chọn
Thêm nhấp chuột, kéo và thả vào các góc
Cập nhật kích thước của hình ảnh

Tôi có thể làm tất cả những điều đó nhưng có vẻ tốn thời gian. Có một kịch bản mã nguồn mở tôi nên sử dụng? Các đề xuất khác?

Nguồn

2011-09-04 ram1

Tôi tìm thấy giải pháp này tại bài đăng này: Draggables and Resizables in SVG.

Trong câu trả lời, bạn có thể tìm thấy liên kết jsfiddle: http://jsfiddle.net/tmkfs/. Bạn có thể thay đổi kích thước hộp bằng cách nhấp và kéo góc của hộp. Hy vọng mã này có thể giúp bạn.

Nguồn

2011-09-16 15:21:24 cabreracanal

Tôi cũng đã tìm thấy https://github.com/cjheath/Raphaelle này. Một tập lệnh cho phép bạn thay đổi kích thước bằng cách nhấp và kéo đối tượng. – cabreracanal

Không phải là tôi biết. Tôi cần phải làm điều tương tự và ngạc nhiên là tôi đã không tìm thấy một plugin hoặc thậm chí là một ví dụ về làm thế nào để làm điều này với Rahpeal.js được nêu ra. Vì điều này có vẻ giống như nhiều thứ mà mọi người muốn làm với SVG hoặc Rapheal.js, tôi ngạc nhiên là không có cách nào để thực hiện nó (tôi đã nghĩ quy mô + kéo sẽ làm điều này nhưng không phải dễ dàng như nó có vẻ).

Tôi cần chức năng này vì vậy tôi đã tự mình xây dựng nó. Tôi chạy vào một ít snag (tài liệu ở đây: Raphael.js drag with scale causes weird jumping behavior) nhưng chỉ có nó làm việc. Một khi tôi đã hoàn thành, tôi có thể đăng giải pháp của tôi trong một jsfiddle hoặc trên github khi tôi thực hiện nếu bạn muốn.

Nguồn

2011-09-05 02:46:19 chuckles

Điều cần biết. Có, vui lòng chia sẻ giải pháp của bạn khi bạn hoàn thành. – ram1

Bạn nên có một cái nhìn để SvgKit Nó cung cấp thư viện tốt để thao tác - tạo ra svg bao gồm xử lý sự kiện bằng javascript.

Từ tài liệu chính thức:

Bổ sung vào đối tượng SVGKit để xử lý sự kiện. Trong SVG, nó có thể là khó để nhận được từ các tọa độ chuột đến tọa độ cục bộ. SVGEvent có các thủ tục để bật các mục có thể kéo, các mục có thể xoay và để ngăn không cho xoay và thu phóng các mục.

Trình diễn sự kiện is here.

Nguồn

2011-09-15 13:42:02 edigu

Làm cách nào để thêm lần nhấp và kéo để chia tỷ lệ hình ảnh trong SVG?

Trả lời

Các vấn đề liên quan