У меня уже давно есть эта проблема, и я просто не могу разобраться с этим ..
Сначала короткое объяснение моей программы:
Он будет использоваться для просмотра сложных сцен в 3D, но чтобы заставить его работать на ноутбуках, вместо этого он показывает предварительно визуализированные 360-градусные рендеры объектов.
Когда вы загружаете объект, он сначала буферизует 360 кадров в память, чтобы вы могли плавно вращаться вокруг этого объекта. Когда вы отпускаете кнопку мыши, она загружает изображение с высоким разрешением этого кадра.
Затем вы сможете увеличить масштаб и перемещаться, чтобы осмотреть модель ближе.
Проблема здесь, когда у меня включены полосы прокрутки, он не будет работать должным образом.
Во-первых, у меня возникла проблема, когда вертикальная полоса прокрутки вышла за пределы изображения при прокрутке горизонтальной полосы прокрутки.
Затем, после еще одного тестирования, они остаются там, где должны, но когда я увеличиваю (опубликую код ниже), горизонтальная полоса прокрутки не может пройти достаточно далеко влево, чтобы показать все изображение.
Что происходит, когда я увеличиваю масштаб, полоса прокрутки остается в левом положении, но я увеличиваю центр изображения (масштабирование, масштабируя контейнер. Изображение заполняет контейнер).
Моя проблема, вероятно, просто из-за того, что я упускаю некоторые базовые знания. И извините, если код немного неаккуратный, я только немного починил. Код, который я публикую ниже, без видимых полос прокрутки.
Вы видите, что я тоже пытался использовать компоненты полосы прокрутки, и это работает как-то. Но я не могу масштабировать полосу прокрутки в зависимости от содержимого, поэтому, если я увеличиваю или уменьшаю масштаб, ручка, которую вы перетаскиваете на полосу прокрутки, будет такой же ...
Заранее большое спасибо всем, кто пытается помочь мне разобраться!
Изображение приложения, работающего при необходимости:
Код:
<mx:Panel x="0" y="0" width="100%" height="100%" titleIcon="@Embed('assets/img/cog_01.png')" title="vCog Subsea - Draugen Project">
<mx:HDividedBox x="0" y="0" width="100%" height="100%" liveDragging="true">
<mx1:TabNavigator width="30%" height="100%" chromeColor="#4B4B4B" tabHeight="20">
<mx1:DividedBox width="100%" height="100%" label="Components" borderVisible="true">
<mx:VBox width="100%">
<mx:Tree id="treeView" x="0" y="0" width="100%" height="100%"
itemRenderer="components.CustomTreeItemRenderer"
paddingBottom="2" showRoot="true"
itemClick="treeItemClick(event)"
itemOpen="treeItemOpen(event)" />
<mx:Canvas width="100%" height="30" styleName="information">
<mx:CheckBox id="infoCheckBox" x="10" y="5" width="100%" label="Information"
click="checkbox1_clickHandler(event)" enabled="true"
selected="{infoview_visible}" styleName="infoCheckBox"/>
</mx:Canvas>
</mx:VBox>
</mx1:DividedBox>
</mx1:TabNavigator>
<mx:HBox width="100%" height="100%">
<mx1:TabNavigator id="myTabs" width="100%" height="100%" dropShadowVisible="false" tabHeight="20">
<mx1:DividedBox id="my3DView" width="100%" height="100%"
label="3D View Main" borderVisible="true" >
<!-- CONTAINER -->
<mx:Canvas id="container" width="100%" height="100%"
resize="resizeHandler(event)"
mouseWheel="videoBufferWheel(event)"
horizontalScrollPolicy="off"
verticalScrollPolicy="off" >
<!-- CONTENT -->
<mx:Canvas id="content"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:Canvas id="videoCanvas" width="100%" height="100%"
mouseDown="videoBufferMDown(event)"
mouseMove="videoBufferMMove(event)"
mouseUp="videoBufferMUp(event)" >
<s:Image id="imageBuffer" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />
<s:Image id="imageFull" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch"/>
<s:Image id="imageMask" visible="false" smooth="true" width="100%" height="100%" scaleMode="stretch" />
</mx:Canvas> <!-- videoCanvas END -->
</mx:Canvas> <!-- CONTENT END -->
<!-- Scrollbars -->
<s:HScrollBar id="hScroll" bottom="0" left="0" right="16" maximum="100" minimum="-100"
pageSize="100" change="scroll(event)"
visible="false" />
<s:VScrollBar id="vScroll" right="0" top="0" bottom="16" maximum="100" minimum="-100" pageSize="100"
change="scroll(event)"
visible="false" />
<!-- Camera controlls -->
<mx:Panel id="panelCamera" visible="true" right="20"
bottom="20" width="130" height="50"
backgroundAlpha="0.6" backgroundColor="#383838"
borderAlpha="0.5" chromeColor="#2A2A2A"
contentBackgroundAlpha="1.0"
contentBackgroundColor="#737373" cornerRadius="0"
dropShadowVisible="false" focusColor="#999999"
layout="absolute" styleName="panelCamera"
symbolColor="#878787" title="Select camera">
<mx:Button id="btnTotal" x="10" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonTotalStyle" click="camTotalClick(event)"/>
<mx:Button id="btnClose" x="50" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonCloseStyle" click="camCloseClick(event)"/>
<mx:Button id="btnExploded" x="90" y="3" toggle="true" buttonMode="true" mouseChildren="false" styleName="camButtonExplodedStyle" click="camExplodedClick(event)"/>
</mx:Panel>
<!-- Full/Color image loading bar -->
<mx:ProgressBar id="myProgressFull" y="10" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
label="Downloading Image" fontSize="7" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="-8"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressColor" y="27" width="95%" height="15" visible="false" alpha="0.5" mode="manual"
label="Downloading Hilights" fontSize="7" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="-8"
labelPlacement="center"/>
<!-- Main loading bar -->
<mx:Panel id="myLoadingPanel" top="100" width="520" height="107"
backgroundAlpha="0.5"
backgroundColor="#3A3A3A"
borderVisible="true"
contentBackgroundColor="#7E7E7E"
dropShadowVisible="false"
fontWeight="normal" fontThickness="0" fontSize="10" color="#959595"
headerHeight="15"
horizontalAlign="center"
horizontalCenter="0"
layout="absolute"
title="Downloading and buffering content..."
visible="false"
verticalAlign="middle"
titleIcon="@Embed('assets/img/loading_01.png')"
>
<mx:ProgressBar id="myProgressBarTotal" y="10" width="500"
label="Total progress" chromeColor="#474747"
color="#FFFFFF" fontWeight="normal"
horizontalCenter="0" indeterminate="false" mode="manual"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressBar" y="41" width="500"
label="Downloading data" chromeColor="#6D5D52"
fontWeight="normal" horizontalCenter="0"
labelPlacement="center" source="_SWFLoader"/>
<mx:ProgressBar id="myProgressBar2" y="61" width="500"
label="Buffering data" chromeColor="#75584A"
color="#EB7738" fontWeight="normal"
horizontalCenter="0" indeterminate="false" mode="manual"
labelPlacement="center"/>
<mx:ProgressBar id="myProgressBarVisual" y="32" width="500" height="5" label=" "
horizontalCenter="0" indeterminate="true"
labelPlacement="center"/>
</mx:Panel>
</mx:Canvas> <!-- CONTAINER END -->
</mx1:DividedBox>
<mx1:DividedBox width="100%" height="100%" label="Main Map" borderVisible="true">
<mx:Canvas width="100%" height="100%" click="overviewClickHandler(event)" >
<s:Image id="overColor" width="100%" height="100%" source="assets/img/overview_color_001.png" scaleMode="letterbox" visible="false" />
<s:Image id="overFull" width="100%" height="100%" source="assets/img/overview_001.png" scaleMode="letterbox" smooth="true" />
</mx:Canvas>
</mx1:DividedBox>
</mx1:TabNavigator>
</mx:HBox>
</mx:HDividedBox>
</mx:Panel>
Функции:
public function videoBufferWheel(event:MouseEvent):void{
var delta:Number=(event.delta*myZoom)/300;
if(myZoom+delta<1){
delta=1-myZoom;
}else if(myZoom+delta>3){
delta=3-myZoom;
}
myZoom += delta;
resizeHandler(null);
event.stopImmediatePropagation();
}
public function resizeHandler(event:Event):void{
var _w:Number=container.width-scrollerSize;
var _h:Number=container.height-scrollerSize;
if(_w/_h<aspect){
content.height=_h*myZoom;
content.width=(_h*myZoom)*aspect;
}else{
content.height=(_w*myZoom)/aspect;
content.width=(_w*myZoom);
}
content.x = (-content.width/2)+container.width/2+(hOffset*(container.width-content.width)/200);
content.y = (-content.height/2)+container.height/2+(vOffset*(container.height-content.height)/200);
}