2012-01-26 38 views
5

Tôi có canvas có một số đường được vẽ bằng chuyển động của chuột. Tôi muốn dòng chỉ tồn tại trong vài giây trước khi tự xóa. Một chút giống như xoáy một dải băng xung quanh nơi nó có độ dài được đặt. Tôi đang sử dụng lineTo để vẽ các đường trong canvas. Tôi đã tham chiếu một chút mã từ đây.Xóa canvas canvas lineto với các đường giao nhau

Vấn đề

tôi có thể xóa dòng bằng cách sử dụng clearRect() nhưng điều này nghĩa là xóa tất cả mọi thứ và vấn đề là nếu dòng cắt nó xóa các khu vực giao nhau quá. đây là Fiddle nhấp chuột và kéo tôi vào bên trong hộp dưới bên phải:

http://jsfiddle.net/m2K5h/

rect rõ ràng sẽ cho tôi điều này: enter image description here

Trong Tóm tắt

clearRect chỉ lau tất cả mọi thứ, tôi muốn tự động 'rút ra' dòng để nó có cả đời. Và tôi không thể cho cuộc sống của tôi tìm thấy một cái gì đó để làm điều đó ....

Bất kỳ sự trợ giúp nào sẽ thật tuyệt vời !!!!

+0

cho bản ghi: bạn không bao giờ nên làm điều gì như thế này: 'brush = eval (" new "+ BRUSHES [0] +" (context) ");' eval nói chung là xấu, gần như không có gì bạn không thể làm mà không sử dụng eval. ví dụ trên tương đương với 'brush = BRUSHES [0] (context)' – zaphod1984

+0

vâng tôi đã tham khảo nguồn từ đâu đó, nơi có rất nhiều cọ vẽ khác nhau. Có rất nhiều mã dọn dẹp và viết lại tôi đang làm. Đánh giá đã lưu thịt xông khói của tôi một vài lần tôi phải nói .. – Alex

Trả lời

8

Canvas là bề mặt bitmap. Không có gì trong canvas có thể cho biết rằng dòng của bạn đã tự vượt qua, ngoài các giá trị pixel.

Để có một đường không tự vẽ, bạn cần phải lưu trữ tất cả các tọa độ cho đường thẳng khi nó được vẽ. Khi đó là thời gian cho các dòng để un-vẽ chính nó, bạn bắt đầu một hình ảnh động mà mỗi khung bạn xóa canvas và vẽ lại một phần thu hẹp của dòng.

jsfiddle example

Nếu bạn có bất cứ điều gì khác phức tạp đáng kể mà bạn không muốn xóa và vẽ lại nhanh chóng, đặt trong một khung thứ hai sau người đầu tiên.

+0

Bỏ phiếu !! tham khảo tốt đẹp, thực sự hữu ích, đó là những gì tôi sau. Tôi là một hater lớn của canvases lớp nói chung. Đặc biệt vì đây chỉ là một lớp của một dự án có cấu trúc DOM thực sự phức tạp, vì vậy tôi cần phải giảm chi phí DOM càng nhiều càng tốt. – Alex

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