如何在Dart中捕獲canvas.offsetLeft，canvas.offsetTop中的更改？

在我的測試代碼中，我想根據canvas.offsetLeft更新mbox.style.left，但是當由於佈局更改而重新定位畫布時，函數repositionBox（）不會被調用。有關如何檢測canvas.offsetLeft中的更改的任何提示？（同樣的問題也適用於canvas.offsetTop爲好。）如何在Dart中捕獲canvas.offsetLeft，canvas.offsetTop中的更改？

DivElement createMessagebox(String id, CanvasElement c) { 

    DivElement mbox = new DivElement(); 
    mbox.id = id; 

    int left = 10 + canvas.offsetLeft; 
    int top = 28 + canvas.offsetTop; 

    mbox.style.border = '2px solid #FFF'; 
    mbox.style.zIndex = "1"; 
    mbox.style.position = "absolute"; 
    mbox.style.width = "300px"; 
    mbox.style.color = "lightgreen"; 
    mbox.style.background = "rgba(50,50,50,0.7)"; 
    mbox.style.textAlign = "left"; 
    mbox.style.padding = "2px"; 
    mbox.style.fontSize = 'x-small'; 

    void repositionBox(Event e) { 
    int left = 10 + canvas.offsetLeft; 
    int top = 28 + canvas.offsetTop; 

    mbox.style.left = "${left}px"; 
    mbox.style.top = "${top}px"; 

    print("repositionBox: event=$e: left=${mbox.style.left} top=${mbox.style.top}"); 
    } 

    repositionBox(null); 

    c.onChange.listen(repositionBox); 

    return mbox; 
}

來源

2013-09-24 Everton

這是不可能直接AFAIK檢測更改這些值，當然不是跨瀏覽器，這讓你有兩種選擇：

在畫布和消息框周圍創建一個包裝div，並將位置：絕對畫布和消息框。這可以讓佈局引擎處理它，並且會像顯示更新一樣高效地做出反應。（強烈建議，除非你有其他需求沒有指定）。
使用計時器輪詢此屬性的更改，並觸發自定義事件來處理它。雖然這會滯後於顯示更新，但在空閒時會消耗CPU（與您想要更新的速度成比例），但這並不理想，但像http://johnpolacek.github.io/scrollorama/這樣的東西依賴於此方法。對於額外的點，你可以使用requestAnimationFrame/setTimeout的組合來做到這一點，當選項卡沒有被聚焦時不會燃燒週期，但我猜測並沒有自己嘗試過。

來源

2013-10-02 19:48:24 mseddon

如何在Dart中捕獲canvas.offsetLeft，canvas.offsetTop中的更改？

回答

相關問題