我有一个 Kinetic.Group 并在其属性中添加了变量 actualstatus。 actualstatus 被其他一些 JavaScript 动态更改为“1”或“0”(1 = ON 0 = OFF)。
现在，我要做的是使用 KineticJS 显示实际状态(打开或关闭)。当我使用自定义 Kinetic.Shape 时，我可以简单地这样做:
var shape = new Kinetic.Shape({
actualstatus: "",
drawFunc: function(canvas){
var ctx = canvas.getContext();
ctx.beginPath();
if(this.actualstatus == "1") ctx.fillStyle = "yellow";
else if(this.actualstatus == "0") ctx.fillStyle = "lightgrey";
ctx.fillRect(0,0,50,50);
ctx.closePath();
}
});
它完美地工作，但无法监听其上的事件并使用多个 ctx.beginPath() ctx.closePath() 来绘制复杂的小部件。
因此，我仅使用非自定义 Kinetic-Shapes 重建它，这解决了我的事件和复杂的绘图问题，但现在，它不再根据 actualstatus 更改其颜色或文本-组的属性，包含所有形状。
所以我的问题是:每次 actualstatus 属性更改时，是否有办法用新颜色等重新绘制形状？或者有没有办法监听 actualstatus - 变化？
我希望你能以某种方式理解我上面所说的有点复杂的内容:)当然，非常感谢任何帮助;)
最佳答案
您可以“监听”“actualstatus”的值何时发生变化并相应地改变颜色
您可以使用 javascript getter 和 setter 来做到这一点。
这 2 个函数与属性 (actualstatus) 相关联，并在请求属性值(getter)和分配属性值(setter)时触发。
// this will trigger the getter function
var test = actualstatus;
// this will trigger the setter function
actualstatus=”1”;
这一点的重要性在于您可以使用设置函数来更改实际状态值……并且……您还可以触发形状颜色的更改。
这是 setter 函数的样子:
function (newValue) {
// change the current value to the new value
this.currentValue = newValue;
// and also change the rectangle’s color based on the newValue
switch(value){
case "0":
myKineticRect.setFill('lightgrey');
break;
case "1":
myKineticRect.setFill('yellow');
break;
default:
myKineticRect.setFill('red');
break;
}
layer.draw();
}
让 getter/setter 发挥作用:
首先，声明一个包含我们想要“监听”的所有变量的对象。
// create a container object for all the Vars we want to "listen" to
var WatchedVars=function(){};
接下来告诉 WatchedVars 添加一个名为“actualstatus”的变量，它将有一个 getter 和一个 setter:
// "listen" for gets and sets on "actualstatus"
Object.defineProperty(WatchedVars.prototype,"actualstatus",{
// this is a "private" property that holds the current value of actualstatus
privateValue: "X",
// on get: just return the current value (privateValue)
get: function(){ return(this.privateValue); },
// on set: set the current value
// ...AND(!)... execute the callback handler (actualstatusSetHandler)
set: function(newValue){
this.privateValue=newValue;
actualstatusSetHandler(this.privateValue);
}
});
因此，无论何时更改 actualstatus 的值，都会调用 setter。
// assigning w.actualstatus a value of "1" triggers its setter function
w.actualstatus=”1”;
setter 将 actualstatus 的当前值更改为“1”
setter 还调用 actualstatusSetHandler() 以黄色填充矩形。
这是每次 actualstatus 的值发生变化时都会执行的回调:
// this handler will get called every time the value of actualstatus changes
// in this case, we change the fill color of a kinetic shape (rect)
function actualstatusSetHandler(value,isTrue){
switch(value){
case "0":
rect.setFill('lightgrey');
break;
case "1":
rect.setFill('yellow');
break;
default:
rect.setFill('red');
break;
}
layer.draw();
}
这就是在 javascript 中“监听”变量变化的方法!
这是代码和 fiddle :http://jsfiddle.net/m1erickson/Uw4Ht/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:200px;
}
</style>
<script>
$(function(){
// create a container object for all the Vars we want to "listen" to
var WatchedVars=function(){};
// "listen" for gets and sets on "actualstatus"
Object.defineProperty(WatchedVars.prototype,"actualstatus",{
// this is a "private" property that holds the current value of actualstatus
privateValue: "X",
// on get: just return the current value (privateValue)
get: function(){ return(this.privateValue); },
// on set: set the current value
// ...AND(!)... execute the callback handler (actualstatusSetHandler)
set: function(newValue){
this.privateValue=newValue;
actualstatusSetHandler(this.privateValue);
}
});
// this handler will get called every time the value of actualstatus changes
// in this case, we change the fill color of a kinetic shape (rect)
function actualstatusSetHandler(value,isTrue){
switch(value){
case "0":
rect.setFill('lightgrey');
break;
case "1":
rect.setFill('yellow');
break;
default:
rect.setFill('red');
break;
}
layer.draw();
}
// just normal Kinetic stuff
// create stage & layer, add a rectangle
var stage = new Kinetic.Stage({
container: 'container',
width: 200,
height: 200
});
var layer = new Kinetic.Layer();
stage.add(layer);
var rect = new Kinetic.Rect({
x: 30,
y: 30,
width: 100,
height: 30,
fill: "green",
stroke: "gray",
strokeWidth: 3
});
layer.add(rect);
layer.draw();
// create an instance of WatchedVars
var w=new WatchedVars();
// testing...just change the value of actualstatus
$("#set0").click(function(){ w.actualstatus="0"; });
$("#set1").click(function(){ w.actualstatus="1"; });
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
<button id="set0">actualstatus==0</button>
<button id="set1">actualstatus==1</button>
</body>
</html>
关于javascript - 根据动态变化的变量改变文本或颜色(KineticJS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17300154/