Ich bin Leinwand mit Fabric JS implementieren, und fand ein interessantes Problem.Fabric JS IText Schriftart Fuzzy nach Position

Wie im Bild zu sehen ist, links Textschrift ist unscharf und richtig ist knackig. Das heißt, der Text wird an einigen Stellen unscharf, während er an anderen Stellen scharf ist.

Javascript-Code

var radius = 50; 
var circle2 = new fabric.Circle({ 
    radius: Math.sqrt(3) * radius/2, 
    fill: '#FFF', 
    opacity: 0.5 
}); 

var text2 = new fabric.IText('Anant Jadhav ANANT dfds sdss sd...', { 
    fontSize: 10, 
    textAlign: "center", 
    left: Math.sqrt(3) * radius/2, 
    top: Math.sqrt(3) * radius/2, 
    originX: "center", 
    originY: "center", 
    lineHeight: 12, 
    fontFamily: 'SanFrancisco', 
    fontWeight: 'bold', 
    fill: '#FFF', 
    opacity: 0.5 
}); 

var element1 = new fabric.Group([myPoly, formatted], { 
    left: 4 * radius, 
    top: Math.sqrt(3) * 5 * radius/2, 
    originX: "center", 
    originY: "center", 
    //hasBorders: false, 
    hasControls: false, 
    hasRotatingPoint: false 
}); 
canvas.add(element1); 
canvas.renderAll(); 

var element2 = new fabric.Group([myPoly, formatted], { 
    left: 2.5 * radius, 
    top: Math.sqrt(3) * 6 * radius/2, 
    originX: "center", 
    originY: "center", 
    //hasBorders: false, 
    hasControls: false, 
    hasRotatingPoint: false 
}); 
canvas.add(element2); 
canvas.renderAll();

JS Fiddle kann here zu sehen. Bitte jemand schlägt mir vor, was könnte ein Problem sein.

Vielen Dank im Voraus.

Quelle

2017-02-07 Miron

Es ist schwer, so lange zu sagen, ich weiß nicht, was Sie für das erste Objekt tun. Es könnte das Problem sein, weil Sie unterschiedliche Deckkraft verwenden. Können Sie den vollständigen Code von 2 Gruppenobjekten hinzufügen? – Observer

@Observer, sie sind gleich, nicht anders. Das Objekt wird an der linken Position verschwommen und an der rechten Position scharf, während es sich bewegt. – Miron

überprüfen Sie diese Geige: https://jsfiddle.net/w19kascL/ Ich verwende Ihren Code und funktioniert gut. Welche Bibliotheksversion verwenden Sie? – Observer

Das Problem könnte in Objekt-Caching für Ihr bestimmtes Projekt sein.

Bis zu fabricjs 1.6.6 Formen werden für jedes Bild gerendert. Seit 1.7.0 gilt dies standardmäßig nicht mehr. Wenn Text über Pixel ist schwieriger mit kleinen Schriftarten zu lesen, Betriebssystem Hinting, und Anti-Aliasing hilft viel. Diese beeinflussen auch Leinwand. Diese geglätteten Schriften sind gut für die spezielle Position, die sie erstellt werden.

In Ihrem Fall wird, sobald Sie eine Gruppe erstellen, eine zwischengespeicherte Kopie erstellt. Eine kleine Leinwand mit einem Bild von Ihrem Sechseck und Text wird gespeichert, später wird es nur verschoben.

Das natürliche Aliasing, das für eine Position erstellt wurde, kann schlecht aussehen, wenn Sie Ihre Gruppe in verschiedene Positionen verschieben. wenn Sie es nicht mit der Maus positionieren (das bewegt sich Pixel für Pixel), aber mit Code ist es wahrscheinlich, dass Sie über 2 Pixel bekommen und was Antialias mit der ersten Zeichnung war, wird immer unschärfer.

Da Sie einfache Formen zeichnen, erhalten Sie nicht so viel Leistungsproblem, das es deaktiviert.

versuchen in Ihrem Projekt dieser einzurichten: wenn etwas ändern

fabric.Object.prototype.objectCaching = false;

und versuchen.

Weitere Details hier:

Fabric Object Caching

Quelle

2017-02-10 08:00:14 AndreaBogazzi

Das macht Sinn, Danke. – Miron

Fabric JS IText Schriftart Fuzzy nach Position

Javascript-Code

Antwort

Verwandte Themen