JCanvas 文本中的增量整数答案

【问题标题】：Incremental Integer in JCanvas textJCanvas 文本中的增量整数
【发布时间】：2015-04-01 12:37:01
【问题描述】：

每次单击矩形时，我都会尝试增加文本值。我究竟做错了什么？我不明白，因为对我的 var 的调用在 drawText 中有效，但在 setLayer 中无效。我查看了使用 '+=' 语法的“setLayer”源代码，但 text 是 String var，我不想进行 String 连接。

value=1
$('canvas').drawText({
  name: 'count',
  fillStyle: '#0f0',
  x: 20, y: 20,
  fontSize: 22,
  fontFamily: 'Verdana, sans-serif',
  text: value
})
.drawRect({
  strokeStyle: '#000',
  fillStyle: '#ccc',
  x: 20, y: 50,
  width: 20,
  height: 20,
  layer: true,
  click: function(layer) {
    // Spin
    $(this).animateLayer(layer, {
      rotate: '+=180'
    });
    v=parseInt(value);
    $(this).setLayer('count',{
        text: value+1 // TRYING to increment over here
    });
  }})

【问题讨论】：

标签： javascript jquery html5-canvas increment jcanvas

【解决方案1】：

我找到了一种解决方法，删除图层并在同一位置创建一个新图层。

 function updateCount(param) {
  $('canvas').removeLayer("count")
  .drawText({
  name: 'count',
  fillStyle: '#0f0',
  x: 250, y: 180,
  fontSize: 22,
  fontFamily: 'Verdana, sans-serif',
  text: value,
  layer: true,
  maxWidth: 200
})
  .drawLayers();
}

【讨论】：

【解决方案2】：

删除和重新创建图层会使 jCanvas 不高兴。一个更好的解决方案是使用setLayer()，将当前值解析为一个数字，增加该值，并将其传递给方法：

$('canvas').drawText({
    layer: true,
    name: 'count',
    fillStyle: '#0f0',
    x: 20, y: 20,
    fontSize: 22,
    fontFamily: 'Verdana, sans-serif',
    text: '1'
})
.drawRect({
    strokeStyle: '#000',
    fillStyle: '#ccc',
    x: 20, y: 50,
    width: 20,
    height: 20,
    layer: true,
    click: function(layer) {
        var $canvas = $(this),
            countLayer = $canvas.getLayer('count');
        // Spin
        $canvas.animateLayer(layer, {
          rotate: '+=180'
        });
        $canvas.setLayer(countLayer,{
            text: parseFloat(countLayer.text) + 1
        });
    }
});

【讨论】：