Làm cách nào để tránh các hiện vật ghép cạnh đa giác trong Canvas HTML5?

Question

Tôi duy trì các trình kết xuất Flash và HTML5/Canvas song song cho dự án nguồn mở OpenHeatMap. Tôi bị cản bởi một sự mâu thuẫn trong việc vẽ các đa giác đầy với các tọa độ phân số giữa hai phiên bản. Nếu bạn hiển thị hai đa giác có chung một cạnh, Canvas sẽ hiển thị một kết nối hiển thị dọc theo cạnh đó, trong khi Flash sẽ liên kết chặt chẽ cả hai cạnh nhau, không có sự khác biệt nào có thể nhìn thấy nếu chúng có cùng màu. Tôi đã đặt cùng một trang tối thiểu đây để hiển thị các vấn đề:

http://web.mailana.com/labs/stitchingbug/

[Gak, ngăn chặn spam dừng này không bị một hình ảnh, nhưng xem ở đây để một web.mailana.com/labs/stitchingbug ảnh chụp màn hình .png]

nguồn, cùng với một dự án flash làm điều tương tự, là ở đây:

github.com/petewarden/stitchingbug

vấn đề cơ bản là nó không thể làm bất cứ đa giác phức tạp r endering nếu bạn không thể khâu đa giác với nhau mà không có đường nối. Tôi không biết chính xác quy tắc điền Flash là gì, nhưng chúng tạo ra kết quả chính xác, cũng như các trình kết xuất 3D. Có ai có một sửa chữa phía khách hàng để làm việc xung quanh vấn đề này? Đó là trình duyệt chéo, mà làm cho nó có vẻ thận trọng, vì vậy bất kỳ tham chiếu đến các quy tắc được sử dụng cũng sẽ được đánh giá cao. Dưới đây là mã Canvas:

var ctx = canvas.getContext('2d'); 
    ctx.fillStyle = 'rgb(0,0,0)'; 

    ctx.beginPath() 
    ctx.moveTo(0, 0); 
    ctx.lineTo(50.5, 0); 
    ctx.lineTo(50.5, 100); 
    ctx.lineTo(0, 100); 
    ctx.closePath(); 
    ctx.fill(); 

    ctx.beginPath() 
    ctx.moveTo(50.5, 0); 
    ctx.lineTo(100, 0); 
    ctx.lineTo(100, 100); 
    ctx.lineTo(50.5, 100); 
    ctx.closePath(); 
    ctx.fill(); 

Answer 1

Bạn đã xem xét cắt ngắn tất cả coords vẽ? Nó không nên giảm chất lượng, và nó có thể khắc phục vấn đề của bạn.

Bạn cũng có thể vẽ một đường kẻ trên khu vực khó khăn để làm cho vấn đề không nhìn thấy được.

Nếu vẫn thất bại, điều đó sẽ hiệu quả.

Answer 2

Đây là một câu hỏi cũ, nhưng tôi đã có cùng một vấn đề.

Tôi thấy rằng vẽ một đường duy nhất giữa hai đa giác (hoặc một phác thảo xung quanh họ) giải quyết vấn đề (trong firefox và chrome ít nhất).

Điều đó dường như lấp đầy khoảng trống trong chrome và firefox ít nhất. Nó là đủ để gọi ctx.stroke() sau ctx.fill(), hoặc vẽ một đường đơn như sau:

ctx.beginPath() 
ctx.moveTo(50.5, 0); 
ctx.lineTo(50.5, 100); 
ctx.stroke(); 

và chắc chắn để thiết lập strokeStyle tất nhiên.

Answer 3

tôi có thể thấy cùng một vấn đề trong Chrome 41.0.2272.89 m ngay cả khi các tọa độ là các số nguyên: http://jsfiddle.net/xgd03fyb/

var canvas = document.getElementById('myCanvas'); 
var context = canvas.getContext('2d'); 
context.lineWidth = 0; 
context.fillStyle = 'black'; 

context.beginPath(); 
context.moveTo(100, 100); 
context.lineTo(200, 200); 
context.lineTo(200, 100); 
context.closePath(); 
context.fill(); 

context.beginPath(); 
context.moveTo(100, 100); 
context.lineTo(100, 200); 
context.lineTo(200, 200); 
context.closePath(); 
context.fill(); 

Tôi nghi ngờ rằng vấn đề có thể được gây ra bởi chiều kim đồng hồ/ngược chiều kim đồng hồ không phù hợp, như trong một số thư viện mà tôi từng sử dụng trong quá khứ này sẽ ảnh hưởng đến các cạnh nào được vẽ như rắn, mà như trong suốt, và đó là chống răng cưa. Tuy nhiên, việc thay đổi thứ tự các lệnh lineTo() trong tam giác thứ hai dường như không có bất kỳ ảnh hưởng nào.

Tôi cũng đã cố gắng chaning fillStyle (đối số được chuyển đến fill()) từ "evenodd" từ mặc định "nonzero", không có may mắn.

Nó không rõ ràng đối với tôi từ spec https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-fill cách này nên làm việc vì vậy tôi đã nộp lỗi để tìm hiểu thêm: https://www.w3.org/Bugs/Public/show_bug.cgi?id=28217