我有一个 Kinetic.Group và thêm biến vào thuộc tính của nó tình trạng thực tế. tình trạng thực tế được thay đổi động thành "1" hoặc "0" bởi một số JavaScript khác (1 = BẬT 0 = TẮT). Bây giờ, điều tôi muốn làm là hiển thị trạng thái thực tế (bật hoặc tắt) bằng KineticJS. Khi tôi sử dụng tùy chỉnh Kinetic.Shape , Tôi chỉ có thể làm điều này:

hình dạng var = Kinetic.Shape mới ({
    trạng thái thực tế: "",
    drawFunc: hàm(canvas){
        var ctx = canvas.getContext();
        ctx.beginPath();
        if(this.actualstatus == "1") ctx.fillStyle = "màu vàng";
        khác if(this.actualstatus == "0") ctx.fillStyle = "lightgrey";
        ctx.fillRect(0,0,50,50);
        ctx.closePath();
    }
});

Nó hoạt động hoàn hảo nhưng không thể nghe các sự kiện trên đó và sử dụng nhiều ctx.beginPath() ctx.closePath() để vẽ các vật dụng phức tạp.

Vì vậy, tôi chỉ xây dựng lại nó bằng cách sử dụng Kinetic-Shapes không tùy chỉnh, giải quyết các sự kiện của tôi và các vấn đề vẽ phức tạp, nhưng bây giờ, nó không còn hoạt động theo trạng thái thực tế thay đổi màu sắc hoặc văn bản của nó- Thuộc tính của nhóm, chứa tất cả các hình dạng.

Vì vậy, câu hỏi của tôi là: mỗi lần tình trạng thực tế Có cách nào để vẽ lại hình bằng màu mới, v.v. khi thuộc tính thay đổi không? Hoặc có cách nào để theo dõi tình trạng thực tế - Thay đổi?

Tôi hy vọng bằng cách nào đó bạn có thể hiểu được những gì tôi đang nói ở trên hơi phức tạp :) Tất nhiên, mọi trợ giúp đều được đánh giá cao;)

câu trả lời hay nhất

Bạn có thể "lắng nghe" khi giá trị của "actualstatus" thay đổi và thay đổi màu sắc tương ứng

Bạn có thể thực hiện việc này bằng cách sử dụng getters và setters javascript.

2 hàm này được liên kết với thuộc tính (actualstatus) và được kích hoạt khi giá trị thuộc tính được yêu cầu (getter) và được gán (setter).

// điều này sẽ kích hoạt hàm getter
var test = trạng thái thực tế;

// điều này sẽ kích hoạt hàm setter
trạng thái thực tế="1";

Tầm quan trọng của việc này là bạn có thể sử dụng hàm set để thay đổi giá trị trạng thái thực tế... và... bạn cũng có thể kích hoạt thay đổi màu của hình dạng.

Hàm setter trông như thế này:

hàm (giá trị mới) {

        // thay đổi giá trị hiện tại thành giá trị mới
        this.currentValue = newValue;

        // và cũng thay đổi màu của hình chữ nhật dựa trên newValue
        chuyển đổi (giá trị) {
            trường hợp "0":
                myKineticRect.setFill('lightgrey');
                phá vỡ;
            case "1":
                myKineticRect.setFill('màu vàng');
                phá vỡ;
            default:
                myKineticRect.setFill('red');
                phá vỡ;
        }
        layer.draw();    
}

Đưa getters/setters vào hoạt động:

Đầu tiên, khai báo một đối tượng chứa tất cả các biến mà chúng ta muốn "nghe".

// tạo một đối tượng chứa cho tất cả các Var mà chúng ta muốn "nghe"
var WatchedVars=function(){};

Tiếp theo, yêu cầu WatchedVars thêm một biến có tên "actualstatus" sẽ có getter và setter:

    // "nghe" để lấy và đặt trên "trạng thái thực tế"
    Object.defineProperty(WatchedVars.prototype,"actualstatus",{

        // đây là thuộc tính "riêng tư" chứa giá trị hiện tại của trạng thái thực tế

        Giá trị riêng tư: "X",

        // khi get: chỉ trả về giá trị hiện tại (privateValue)

        nhận được: function(){ return(this.privateValue },

        // on set: đặt giá trị hiện tại 
        // ...AND(!)... thực thi trình xử lý gọi lại (actualstatusSetHandler)

        đặt: hàm (newValue) {
                  this.privateValue=newValue;
                  trạng thái thực tếSetHandler(this.privateValue);
              }

    });

Do đó, bất cứ khi nào giá trị của trạng thái thực tế được thay đổi, phương thức setter sẽ được gọi.

// gán cho w.actualstatus giá trị "1" sẽ kích hoạt hàm setter của nó
w.actualstatus="1";

setter thay đổi giá trị hiện tại của trạng thái thực tế thành "1"

Trình thiết lập cũng gọi thực tếstatusSetHandler() để tô màu hình chữ nhật bằng màu vàng.

Đây là lệnh gọi lại sẽ được thực thi mỗi khi giá trị của trạng thái thực tế thay đổi:

    // trình xử lý này sẽ được gọi mỗi khi giá trị của trạng thái thực tế thay đổi
    // trong trường hợp này, chúng ta thay đổi màu tô của hình động học (trực tràng)
    hàm thực tếstatusSetHandler(value,isTrue){
        chuyển đổi (giá trị) {
            trường hợp "0":
                trực tràng.setFill('lightgrey');
                phá vỡ;
            case "1":
                trực tràng.setFill('màu vàng');
                phá vỡ;
            default:
                trực tràng.setFill('red');
                phá vỡ;
        }
        layer.draw();
    }

Đây là cách "lắng nghe" những thay đổi có thể thay đổi trong JavaScript!

Đây là mã và fiddle:http://jsfiddle.net/m1erickson/Uw4Ht/

  <đầu>
    
    
    
    

        

$(hàm(){

    // tạo một đối tượng chứa cho tất cả các Var mà chúng ta muốn "nghe"
    var WatchedVars=function(){};

    // "nghe" để lấy và đặt trên "trạng thái thực tế"
    Object.defineProperty(WatchedVars.prototype,"actualstatus",{

        // đây là thuộc tính "riêng tư" chứa giá trị hiện tại của trạng thái thực tế

        Giá trị riêng tư: "X",

        // khi get: chỉ trả về giá trị hiện tại (privateValue)

        nhận được: function(){ return(this.privateValue },

        // on set: đặt giá trị hiện tại 
        // ...AND(!)... thực thi trình xử lý gọi lại (actualstatusSetHandler)

        đặt: hàm (newValue) {
                  this.privateValue=newValue;
                  trạng thái thực tếSetHandler(this.privateValue);
              }

    });

    // trình xử lý này sẽ được gọi mỗi khi giá trị của trạng thái thực tế thay đổi
    // trong trường hợp này, chúng ta thay đổi màu tô của hình động học (trực tràng)
    hàm thực tếstatusSetHandler(value,isTrue){
        chuyển đổi (giá trị) {
            trường hợp "0":
                trực tràng.setFill('lightgrey');
                phá vỡ;
            case "1":
                trực tràng.setFill('màu vàng');
                phá vỡ;
            default:
                trực tràng.setFill('red');
                phá vỡ;
        }
        layer.draw();
    }

    // chỉ là những thứ Kinetic bình thường
    // tạo stage & layer, thêm hình chữ nhật
    var stage = new Kinetic.Stage({
        thùng chứa: 'thùng chứa',
        chiều rộng: 200,
        chiều cao: 200
    });
    lớp var = Kinetic.Layer mới();
    stage.add(lớp);


    var reg = new Kinetic.Rect({
      x: 30,
      y: 30,
      chiều rộng: 100,
      chiều cao: 30,
      điền: "xanh",
      nét: "xám",
      đột quỵChiều rộng: 3
    });    
    layer.add(trực tràng);
    layer.draw();



    // tạo một instance của WatchedVars
    var w=new WatchedVars();


    // đang kiểm tra...chỉ cần thay đổi giá trị của trạng thái thực tế
    $("#set0").click(function(){ w.actualstatus="0"; });
    $("#set1").click(function(){ w.actualstatus="1"; });


}); // kết thúc $(function(){});

       



    

    trạng thái thực tế==0
    trạng thái thực tế==1