JCanvas 文本中的增量整数
Incremental Integer in JCanvas text
我试图在每次单击矩形时增加文本值。我究竟做错了什么 ?
我不明白,因为对我的 var 的调用在 drawText 中有效,但在 setLayer 中无效。
我查看了 "setLayer" 源代码,它使用“+=”语法,但文本是一个字符串变量,我不想进行字符串连接。
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
});
}
});
我试图在每次单击矩形时增加文本值。我究竟做错了什么 ? 我不明白,因为对我的 var 的调用在 drawText 中有效,但在 setLayer 中无效。 我查看了 "setLayer" 源代码,它使用“+=”语法,但文本是一个字符串变量,我不想进行字符串连接。
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
});
}
});