Mam cztery ekrany canvas
, umieszczone dwa powyższe i dwa poniżej.Przesunięcie w HTML-ie Opóźnienia do zmiany
Każdy z nich ma przycisk, który pozwala zmaksymalizować płótno, ukrywając pozostałe.
Ten przycisk znajduje się nad każdą kanwą, z absolutną pozycją opartą na offsetTop
i offsetLeft
płótna.
Jednak gdy zmaksymalizuj lub zminimalizuj płótno, formuła przycisku aktualizuje tylko właściwość width
.
Dziwne jest to, że jeśli zmieniam rozmiar ekranu, który również wywołuje funkcję resize
, wszystko idzie we właściwe miejsce.
EDIT: Informacje dodatkowe: Używam VueJS oraz w celu ukrycia innej płótnie, mogę ubiegać v-show="false"
do nich rodzica divs
, co tylko dotyczy display: none
.
Niektóre fragmenty:
zmiany rozmiaru początkowa i detektor:
window.onload = function() {
resizeAll();
window.addEventListener('resize', resizeAll, false);
};
Piasta zmiany wielkości:
function resizeAll() {
vue.$refs.panelOne.resizeDefault();
// ...
vue.$refs.panelN.resizeDefault();
}
standardowe Zmiana rozmiaru panelu i zmiana rozmiaru metody. W "expandStyles" to style css stosowane do przycisku:
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();
}
I wreszcie, getters Wymiary:
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
};
}
Prawdopodobnie chcesz załączyć cały fragment, aby ludzie mogli Ci pomóc. Jeśli Twojego fragmentu nie można oddzielić od Vue, możesz użyć https://codesandbox.io/s/vue – deathangel908
Spróbuj zmienić rozmiar płótna, a następnie przerysuj przycisk. Wartości przesunięcia Top i Left płótna mogą nie zostać zaktualizowane po przerysowaniu przycisku. Jeśli nadal nie działa, użyj funkcji setTimeOut. –
Dodano więcej snippetów. Zasadniczo zastosowanie metody setTimeout działa. Chciałbym jednak wybrać bardziej proste rozwiązanie. Jeśli nic innego nie działa, chętnie przyjmę odpowiedź. – Luiz