Je maintiens le flash parallèle et les rendriers HTML5 / Canvas pour le projet Open-Source OpenHeatMap. Je suis en proie à une incompatibilité dans le rendu des polygones remplis avec des coordonnées fractionnaires entre les deux versions. Si vous rendez deux polygones qui partagent un bord, la toile affichera une jointure visible sur ce bord, tandis que Flash se fondre de manière transparente les deux ensemble, sans différence visible s'il s'agit de la même couleur. J'ai mis une page minimale ici pour montrer le problème:
http://web.mailana.com/labs/ Stitchingbug /
[GAK, la prévention du spam cesse d'être une image, mais voir ici pour une capture d'écran Web.mailana.com/labs/stititchingbug.png]
La source, avec un projet flash qui fait la même chose, est ici:
github.com/petewarden/stititchingbug
Le problème fondamental est qu'il est impossible de faire un rendu polygonal complexe Si vous ne pouvez pas cousez des polygones ensemble sans coutures. Je ne sais pas exactement ce que les règles de remplissage de Flash sont, mais elles produisent les résultats corrects, de même que les rendriers 3D. Quelqu'un a-t-il une solution côté client pour contourner ce problème? C'est un navigateur croisé, ce qui le rend délibéré, de sorte que toutes les références aux règles utilisées seraient également appréciées. Voici le code de toile:
3 Réponses :
Avez-vous envisagé de tronquer toutes les coordonnées de dessin? Il ne devrait pas réduire la qualité, et cela pourrait réparer votre problème.
Vous pouvez également dessiner une ligne sur la zone troublante pour rendre le problème invisible.
Si tout échoue, cela devrait fonctionner.
Malheureusement, tronquer des coordonnées ne fonctionne que dans le cas simple d'un ensemble statique de polygones. Dès que vous allez zoomer ou paniquer une carte par exemple, la troncature provoque des «bords de danse» assez graves, car ils se détachent entre les coordonnées entier. Il déforme également sensiblement les bords de grands polygones avec des notes peu profondes.
C'est une question ancienne, mais j'avais le même problème.
Je trouve que dessiner une seule ligne entre les deux polygones (ou un contour autour d'eux) résout le problème (dans Firefox et Chrome au moins). < / P>
Cela semble combler le vide en chrome et à Firefox au moins. Il suffit d'appeler et assurez-vous de définir le strokestyle bien sûr. ctx.troke () après ctx.fill () ou dessinez une seule ligne comme suit:
Si la ligne que vous caressez est d'un modèle d'image, en chrome, cela dégrade gravement la performance pour une raison quelconque.
En outre, cette solution ne fonctionne pas avec des polygones semi-transparents.
Ajout d'un coup autour du polygone avec la touche de ligne de .5 a bien fonctionné pour moi. Jusqu'à ce que j'ai remarqué quand on a zoomé dans les coins des polygones se dépassait de façon spectaculaire. Donc, j'ai plutôt réglé la touche de la ligne à 0,5 / zoom (où le zoom est de 1 pour 100%, 0,5 pour 50%, 2 pour% 200, etc.) et cela fonctionne maintenant magnifiquement. Les polys semi-transparents rendront toujours avec des arêtes notables malheureusement. En théorie, cela pourrait être surmonté en rendant le polygone complètement opaque sur une toile distincte, ce qui rend la transparence avec transparence sur la toile cible - cela entraînerait probablement une performance significative.
Je peux voir le même problème dans le chrome 41.0.272.89 m même lorsque les coordonnées sont tous des entiers: 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();
Brainstorming: Calculez le centre de chaque polygone et lorsque vous dessinez les points vers l'extérieur du centre par une petite quantité (peut-être 0,5). Forcer une légère découverte de l'anti-aliasing.
Voir la seconde moitié de Cette réponse pour comprendre pourquoi vous ne pouvez tout simplement pas résoudre Ce problème sans un "hack" comme un accident vasculaire cérébral ou un sous-remplissage lorsque l'anti-aliasing est impliqué.