Question

Ok, ich habe mich also umgeschaut, aber keine definitive Antwort gefunden. Also, ich habe ein HTML-Tag wie folgt:

<input type="checkbox" data-parameters='{"uploadZone":0,"left":27,"top":225,"degree":0,"price":0,"replace":"togglePhone","originX":"left","originY":"top","fill":"#166fc4","opacity":1,"removable":0,"draggable":0,"rotatable":0,"resizable":0,"zChangeable":0,"topped":0,"autoSelect":0,"boundingBoxMode":"inside","fontFamily":"Open Sans","fontWeight":"normal","fontStyle":"normal","textDecoration":"normal","textAlign":"left","fontSize":16,"maxLength":0,"maxLines":0,"lineHeight":1,"strokeWidth":1,"editable":0,"curvable":0,"curved":0,"curveSpacing":10,"curveRadius":80,"curveReverse":0,"textBox":0,"customAdds": {}}' name="toggle_element" class="toggle-element" /> 

Dieses mit einem Plugin verwendet werden soll, genannt „fabric.js“. Jetzt ist es mein Ziel, nur den "obersten" Parameter dieses Attributs zu manipulieren. Ich rufe die Parameter:

var getParameters = $(this).data('parameters'); 

Ich habe versucht, den obersten Wert als solche zu ändern:

$(document).on("change", ".toggle-element", function() { 

    var getParameters = $(this).data('parameters'); 

    getParameters.top = 10; 
    alert(getParameters.top); 

}); 

Der Alarm den richtigen Wert zeigt, dass ich geschrieben, aber aus irgendeinem Grund, auf der Leinwand, es ist immer noch 225 (wie das Beispiel, das ich oben gepostet habe). Was versuche ich zu erreichen, mache ich es einfach falsch?

Vielen Dank im Voraus :)

******** EDIT ********

Dank empiric der und Antworten Kostas Pelelis, konnte ich dies, um herauszufinden, . Was ich also vermisste war, die Parameter wieder einzustellen, nachdem ich die Änderung vorgenommen hatte. So würde der Code sein:

Das fügte den neuen Parameter hinzu, den ich benötigte und wie erwartet arbeitete. Ich habe sogar versucht, einige andere Parameter zu manipulieren, und das hat auch funktioniert. Im Grunde genommen musste ich lediglich den Parameterwert ändern und dann die Parameterwerte erneut hinzufügen. Dies wird auf die oben angegebenen Werte aktualisiert. Als ich den obigen Code zum ersten Mal ausprobierte, machte ich den Fehler, die Variable getParameters korrekt zu referenzieren. Also stellen Sie sicher, dass Sie sehr genau angegeben haben, welches Element Sie manipulieren.

Answer 1

Ich habe noch nie Fabricjs verwendet, aber ich werde aus der jQuery Perspektive antworten. Wie Sie sehen können here Daten Methode bei Verwendung mit nur einem Parameter gibt eine Referenz des ausgewählten Datenspeichers. Wenn Sie also etwas an diesen Daten ändern, wird die Änderung nicht auf dem tatsächlichen Objekt widergespiegelt.

EDIT: .data() gibt tatsächlich eine Referenz des Objekts zurück.

Was Sie tun können, ist

$(document).on("change", ".toggle-element", function() { 

    var getParameters = $(this).data('parameters'); 

    getParameters.top = 10; 
    $(this).data('parameters', getParameters) 
    alert(getParameters.top); 

}); 

Und das wird die modifizierte Kopie des Objekts, die eigentlichen zuweisen.

Answer 2

Nicht 100% sicher, was Sie meinen. Und ein Beispielcode-Snippet wäre hilfreich. Nachdem Sie ein Fabricjs-Objekt mit neuen Werten festgelegt haben, müssen Sie das Fabric-Canvas-Instanzobjekt übernehmen und renderAll() aufrufen, damit die Zeichenfläche aktualisiert werden kann.

Unten ist ein Beispiel, wo ich einen Kreis mit einigen Standardwerten hinzufüge und dann den oberen Offset zu einer neuen Zahl ändere. Nur wenn Sie renderAll() aufrufen, aktualisiert der Kreis seine Position.

var canvas = new fabric.Canvas('t'); 
 

 
// set the circle to be at 100 from the top 
 
var circle = new fabric.Circle({ radius: 20, fill: 'green', left: 100, top: 100 }); 
 
canvas.add(circle); 
 

 
// now set the circle to be 10 from the top 
 
circle.top = 10; 
 

 
// circle will not change from 100 to 10 untill we tell the canvas to render again. 
 
canvas.renderAll();

canvas { 
 
    border:1px solid; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script> 
 

 
<canvas id="t" height="200" width="500">