Sử dụng lấp đầy chẵn lẻ trên vải HTML

Question

Có bất kỳ thư viện nguồn mở nào (JaveScript) thực thi quy tắc điền lẻ ngay cả trên canvas không. Nếu tôi cố gắng thực hiện nó thì sẽ phức tạp như thế nào (xem xét trường hợp chung có đường cong phức tạp) và nó sẽ ảnh hưởng đến hiệu năng (do chi phí làm việc cho mỗi pixel trong JaveScript).

Các phương pháp để chuyển đổi điền đơn lẻ thành cuộn dây khác không (xem xét giải pháp chung sẽ hoạt động cho mọi trường hợp). Một khi phương pháp tôi tìm thấy là chia hình thành tất cả các đa giác không giao nhau và điền chúng một cách riêng biệt.

Một tùy chọn là sử dụng SVG và vẽ SVG trên canvas, nhưng tôi cũng thấy rằng hiển thị SVG gốc chậm một chút trên iPad, nhưng SVG có chậm ngay cả khi tôi vẽ trên khung HTML (trên iPad) không?

Cảm ơn trước

Answer 1

Tôi đã xem qua câu hỏi này giống như tôi đã tìm kiếm một số thời gian trước đây. Tức là, sử dụng quy tắc điền "evenodd" bên trong canvas HTML. Sau khi nghiên cứu một chút, và thông qua danh sách gửi thư và các bản vá lỗi, tôi nhận thấy rằng, các phiên bản gần đây của cả Firefox và Chrome đều hỗ trợ cho điều này, nhưng mỗi phiên bản khác nhau theo trình duyệt cụ thể.

Trong Firefox, đó là vấn đề khi sử dụng mozFillRule attribute. Ví dụ:

// 
// Firefox Example 
// 
// canv has the HTML canvas element 
var ctx = canv.getContext("2d"); 
ctx.fillStyle = "#ff0000"; 
ctx.mozFillRule = 'evenodd'; 
ctx.beginPath(); 
ctx.moveTo(100, 10); 
ctx.lineTo(40, 180); 
ctx.lineTo(190, 60); 
ctx.lineTo(10,60); 
ctx.lineTo(160,180); 
ctx.closePath(); 
ctx.fill(); 

Trong Chrome, bạn làm điều đó bằng cách thông qua các chuỗi evenodd như một tham số cho phương thức fill. Ví dụ:

// 
// Chrome Example 
// 
// canv has the HTML canvas element 
var ctx = canv.getContext("2d"); 
ctx.fillStyle = "#ff0000"; 
ctx.beginPath(); 
ctx.moveTo(100, 10); 
ctx.lineTo(40, 180); 
ctx.lineTo(190, 60); 
ctx.lineTo(10,60); 
ctx.lineTo(160,180); 
ctx.closePath(); 
ctx.fill('evenodd'); 

Đây là hai trình duyệt tôi đã nghiên cứu, vì vậy tôi không biết về trạng thái của điều này trong các trình duyệt khác. Hy vọng rằng trong tương lai không xa, chúng tôi sẽ có thể sử dụng tính năng này thông qua số fillRule mà hiện nay là một phần của HTML standard.

Answer 2

Xem fill() method API:

void ctx.fill(); 
    void ctx.fill(fillRule); 
    void ctx.fill(path, fillRule); 

fillRule có thể được "khác không" hoặc "evenodd"
--- "nonzero": Nguyên tắc uốn lượn khác không, đó là quy tắc mặc định.
--- "evenodd": Quy tắc cuộn dây chẵn lẻ.

Khả năng tương thích của trình duyệt:
--- IE 11+, Firefox 31+, Chrome OK.
--- Tôi đã không kiểm tra trên IE 9/10.
--- Sử dụng ctx.mozFillRule = 'evenodd'; bằng Firefox cũ 30/30-.