2017-10-25 29 views
7

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.

Initial screen

After maximizing

Then after resizing screen

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 
    }; 
} 
+1

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

+0

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. –

+0

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

Odpowiedz

1

zgadzam się z SPHINX, wydaje się, że problem leży po propagacji właściwości reaktywne w tym.expandStyle do rzeczywistego DOM. Byłoby przydatne, gdybyś mógł udostępnić część szablonu, która ma twoje płótna i aplikację do pozycjonowania.

W międzyczasie, jeśli setTimeOut nie czuje się dobrze, możesz zrobić więcej "Vue-way", używając Vue: nextTick, aby ustawić kolejność operacji (ponowne obliczanie stylów, przerysowywanie).