Vẽ một đường bằng công cụ Pen trên Canvas Smothly mà không cần phải vẽ lại tất cả các dòng khác

Question

Có cách nào để tránh vẽ lại tất cả các phần tử trên canvas (vì vậy tôi không phải theo dõi mọi thứ), trong khi vẫn có trải nghiệm vẽ mượt mà với đường vẽ hiện tại?

Answer 1

Điều này là một câu hỏi rất hay, nhưng từ ngữ của nó mơ hồ. Vui lòng cẩn thận hơn trong các câu hỏi từ ngữ trong tương lai.

Thông thường khi vẽ các đường trơn, bạn cần vẽ lại đường ngay từ đầu.

Bạn không cần phải vẽ lại mọi thứ từ đầu mặc dù, bởi vì bạn cần phải làm theo các hoạt động:

1. Save the canvas hiện tại để một canvas trong bộ nhớ
2. Bắt đầu vẽ một đường mới
3. Khi bạn đang vẽ, bạn liên tục:
   • Xoá vải
   • vẽ từ i n-bộ nhớ vải lên vải chính
   • Vẽ đường-so-xa
4. Khi dòng kết thúc, giúp bạn tiết kiệm vải mới vào khung trong bộ nhớ và lặp lại quá trình này

Các chỉ dòng bạn cần phải theo dõi (về điểm) là "hiện tại". Tất cả các dòng cũ được lưu vào bitmap thông qua canvas trong bộ nhớ.

Dưới đây là một ví dụ tôi đã thực hiện một thời gian dài trước đây, đối phó với các đường trơn tru cụ thể. Các tổ chức đang kỳ lạ vì tôi bắt đầu với mã elses ai đó, nhưng nó sẽ cho bạn những ý tưởng cơ bản:

http://jsfiddle.net/NWBV4/10/

Phần vẽ mô tả ở trên được nhìn thấy trong các MouseMove:

this.mousemove = function(ev) { 
    if (tool.started) { 
     context.clearRect(0, 0, 300, 300); 
     // put back the saved content 
     context.drawImage(memCanvas, 0, 0); 
     tool.points.push({ 
      x: ev._x, 
      y: ev._y 
     }); 
     drawPoints(context, tool.points); 
    } 
};