您可以“监听”“实际状态”的值何时发生变化并相应地改变颜色
您可以使用 javascript getter 和 setter 来做到这一点。
这两个函数与属性（实际状态）相关联，并在请求属性值（getter）和分配属性值（setter）时触发。
// this will trigger the getter function
var test = actualstatus;
// this will trigger the setter function
actualstatus=”1”;
这样做的重要性在于，您可以使用 setter 函数来更改实际状态值……并且……您还可以触发对形状颜色的更改。
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中的变量变化！
这是代码和小提琴：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>