HTML offsetKullanılacak gecikmeler

Question

Ekranımda iki tane yukarıda ve ikide yer alan dört adet canvas var.

Her birinin tuvali büyütmeyi, diğerlerini gizlemeyi sağlayan bir düğme vardır.

Bu düğme, tuvalin üzerinde offsetTop ve offsetLeft tabanlı mutlak konumla, her tuvalin üzerine yerleştirilmiştir. Bir tuvale büyütür veya küçültürken, düğme formülü yalnızca width özelliğini günceller.

Garip olan şu ki, resize işlevini de çağıran ekranı yeniden boyutlandırırsam, her şey doğru yere gider.

DÜZENLEME: ek bilgiler: Başka tuval gizlemek amacıyla, VueJS kullanarak ve am, ben uygulamak v-show="false" sadece ebeveyn divs, onlara karşı display: none geçerlidir.

Bazı parçacıkları:

İlk boyutlandırma ve dinleyici:

window.onload = function() { 
    resizeAll(); 
    window.addEventListener('resize', resizeAll, false); 
}; 

boyutlandırma göbek:

function resizeAll() { 
    vue.$refs.panelOne.resizeDefault(); 
    // ... 
    vue.$refs.panelN.resizeDefault(); 
} 

panelin yeniden boyutlandırma varsayılan ve yöntemi yeniden boyutlandırmak. propagandasıyla birlikte yatıyor

Ben SPHINX katılıyorum

function getScreenDimensions() { 
    return { 
     width: window.innerWidth - 310, 
     height: window.innerHeight * 0.92 
    }; 
} 

function getHalfScreenDimensions() { 
    return { 
     width: (window.innerWidth - 310)/2, 
     height: (window.innerHeight * 0.92)/2 
    }; 
} 

Answer 1

, bu sorun gibi görünüyor:

resizeDefault() { 
     let dimensions; 
     if (this.expanded) { 
      dimensions = getScreenDimensions(); 
     } else { 
      dimensions = getHalfScreenDimensions(); 
     } 
     this.resize(dimensions.width, dimensions.height); 
    } 

resize (width, height) { 
     this.canvas.width = width; 
     this.canvas.height = height; 
     this.expandStyles.top = (this.canvas.offsetTop + 10) + 'px'; 
     this.expandStyles.left = (this.canvas.offsetLeft + this.canvas.width - 40) + 'px'; 
     drawInterface.redraw(); 
    } 

Ve nihayet, boyut getters: "expandStyles" butonuna uygulanan css stilleri olduğunu Bu reaktif özellikleri, gerçek DOM için this.expandStyles. Tuvallerinizin ve konumlandırma uygulamasının bulunduğu şablonun bölümünü paylaşırsanız yararlı olur.

Bu arada, setTimeOut size uygun gelmiyorsa, işlem sırasını ayarlamak için Vue: nextTick'u kullanarak daha fazla "Vue-way" işlemi yapabilirsiniz (stilleri yeniden hesaplama, yeniden çizme).