个人中心
gpt4 book ai didi

javascript - 根据动态变化的变量改变文本或颜色(KineticJS)

转载 作者：可可西里 更新时间：2023-11-01 12:50:11 26 4
gpt4 key购买 nike

我有一个 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/

26 4 0
文章推荐： windows - 如何打开 .msu 扩展文件？
文章推荐： PHP 评估 $a ="$a"?
文章推荐： zend-framework - Yii 的灵活性
文章推荐： javascript - 使用 JavaScript 动态更改背景颜色
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com