Question

好的，所以我一直在四处寻找，但还没有找到明确的答案。所以，我有一个HTML标签如下：

<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" />

这将与名为“fabric.js”的插件一起使用。现在，我的目标只是操纵该属性的“顶部”参数。我使用以下方法调用参数：

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

我试图改变最高值：

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

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

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

});

警报显示我发布的正确值，但由于某种原因，在画布上，它仍然默认为225（如我上面发布的示例）。我正在尝试做什么，我做错了吗？

提前致谢：）

********编辑********

感谢经验和Kostas Pelelis的回应，我能够解决这个问题。所以，我缺少的是在我做出改变之后将参数设置回来。所以，代码将是：

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

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

   getParameters.top = 10;

   $(this).data('parameters', getParameters);

});

添加了我需要的新参数并按预期工作。我甚至尝试过操纵其他一些参数，这也很有用。基本上，我需要做的就是更改参数值，然后重新添加参数值。这将更新为我上面指定的值。现在，当我第一次尝试上面的代码时，我错误地正确引用了getParameters变量。因此，请确保您指定了您正在操作的元素。

Answer 1

我从未使用过fabricjs，但我会从jQuery的角度回答。正如您在仅与一个参数一起使用时可以看到here数据方法返回所选数据存储的引用。因此，如果您对此数据进行了更改，则更改将不会反映在实际对象上。

编辑：.data（）实际上返回对象的引用。

你能做的是

context_processors

这会将对象的修改后的副本分配给实际的。

Answer 2

不是100％肯定你的意思。示例代码段会很有帮助。在使用新值设置fabricjs对象后，您需要获取结构画布实例对象并调用renderAll()以更新画布。

下面是一个示例，我添加一个带有一些默认值的圆圈，然后将顶部偏移更改为新数字。只有当您拨打renderAll()时，圈子才会更新它的位置。

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">

更改“data-parameters”属性中的参数

2 个答案: