Javascript JCanvas文本中的增量整数
我试图在每次单击矩形时增加文本值。我做错了什么? 我不明白,因为对我的var的调用在drawText中工作,但在setLayer中不工作。 我看了“setLayer”源代码,他正在使用“+=”语法,但文本是字符串变量,我不想进行字符串连接Javascript JCanvas文本中的增量整数,javascript,jquery,html5-canvas,increment,jcanvas,Javascript,Jquery,Html5 Canvas,Increment,Jcanvas,我试图在每次单击矩形时增加文本值。我做错了什么? 我不明白,因为对我的var的调用在drawText中工作,但在setLayer中不工作。 我看了“setLayer”源代码,他正在使用“+=”语法,但文本是字符串变量,我不想进行字符串连接 value=1 $('canvas').drawText({ name: 'count', fillStyle: '#0f0', x: 20, y: 20, fontSize: 22, fontFamily: 'Verdana, sans-
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
});
}})
我找到了一个解决办法,删除图层并在同一位置创建一个新图层
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();
}
删除和重新创建层会使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
});
}
});