Canvas + Fabricjs Editor-Problem

[Laser]

Hallo zusammen,

folgende Thematik.
Ich habe ein kleinen "Editor" in Form einer Canvas-Arbeitsfläche gebastelt, in welchem Kunden ihre Inhalte, welche dann auf einen TV-Gerät gespiegelt werden, bearbeiten können.

Die Auflösung der TV-Geräte betragen alle 1920x1080 (FullHd).

Der Ablauf im Editor ist wie folgt ... der Kunde kann zwischen verschiedenen Hintergründen wählen und fügt dann Text oder Bilder hinzu. Diese kann er innerhalb des Editors verschieben. Das Skalieren habe ich derzeit deaktiviert. Desweiteren lassen sich vordefinierte Schriftarten und Größen auswählen.

Ich habe das Canvas auf die hälfte skaliert, damit der Kunde kein FullHd-Monitor benötigt um den Editor vernünftig benutzen zu können.

Das Problem welches ich habe ist, dass der Text nicht exakt an der Position landet wie man es im Editor vorgegeben hat. Das CSS habe ich geprüft. Es pfuscht kein Padding oder Margin rein.

Hier ein Beispiel ....

Canvas-Editor:



Ich habe hier bewusst die Texte entsprechend positioniert.

Das Ergebnis im Frontend (reine HTML-Ausgabe) sieht so aus:



Man sieht das die Schrift nicht an der korrekten Stelle ist und auch leicht unterschiedlich dargestellt wird.

Der Text ist im Canvas nicht auf FETT gestellt!

Die Positionen speichere ich aus dem Canvas heraus in dem ich die Objekte durchlaufe und entsprechend Speicher. Für die Position nehme ich vom jeweiligen Objekt das .left und .top raus.

Hier noch ein paar Daten.

"Lecker Fleisch"-Objekt:

Spoiler: Code anzeigen ...

1. i
   1. __corner:0
   2. __dimensionAffectingProps:Object
   3. __eventListeners:Object
   4. __isMousedown:false
   5. __lastClickTime:1485428512405
   6. __lastIsEditing:false
   7. __lastLastClickTime:1485428359646
   8. __lastPointer:Object
   9. __lastSelected:false
   10. __lineHeights:Array[1]
   11. __lineWidths:Array[1]
   12. __mousedownX:414.5
   13. __mousedownY:245
   14. __newClickTime:1485428512405
   15. __skipDimension:false
   16. __widthOfSpace:Array[0]
   17. _cacheCanvas:canvas
   18. _cacheContext:CanvasRenderingContext2D
   19. _cacheProperties:Object
   20. _controlsVisibility:Object
   21. _isMeasuring:false
   22. _textLines:Array[1]
   23. absoluteCoords:Object
   24. active:true
   25. cacheHeight:191
   26. cacheWidth:388
   27. canvas:i
   28. ctx:CanvasRenderingContext2D
   29. cursorOffsetCache:Object
   30. dirty:false
   31. fill:"#ffffff"
   32. fontFamily:"Yanone Kaffeesatz"
   33. fontSize:60
   34. fontStyle:""
   35. fontWeight:""
   36. hasControls:false
   37. height:67.79999999999998
   38. isMoving:false
   39. left:360
   40. minScaleLimit:0.0037861589707258434
   41. mouseMoveHandler)
   42. oCoords:Object
   43. scaleX:1
   44. scaleY:1
   45. selected:true
   46. skewX:0
   47. skewY:0
   48. styles:Object
   49. text:"Lecker Fleisch!"
   50. textDecoration:""
   51. top:229
   52. width:264.1199188232422
   53. zoomX:1
   54. zoomY:1
   55. __proto__:i

Canvas initialisierung:

var resWidth    = 1920;
    var resHeight    = 1080;
    var scaleRatio    = 0.5;

    var canvas = new fabric.Canvas(document.getElementById('cixeditor'));
    canvas.stateful = false;
    canvas.setHeight(resHeight*scaleRatio);
    canvas.setWidth(resWidth*scaleRatio);

    fabric.Image.fromURL('/uploads/backgrounds/<?=$background->uid.$background->file_ext?>', function(img) {
        canvas.backgroundImage = img;
        canvas.backgroundImage.width = resWidth*scaleRatio;
        canvas.backgroundImage.height = resHeight*scaleRatio;
        canvas.renderAll();
    });

Im Frontend nehme ich die ganzen Werte dann wieder *2 um den ScaleRatio auszugleichen.

Falls euch was fehlt ... sagt bescheid ...

Danke schon mal.

 

[philishake]

Hey,
hast du das irgendwo erreichbar am laufen, so dass man sich das mal angucken un debuggen koennte?