update1 пожалуйста, прочитайте обновленный пункт ниже
update2 создано тестовое приложение. выяснил, что flex пытается разместить bg в центре контейнера (canvas). поэтому новый вопрос «как расположить изображение bg в левом верхнем углу, когда изображение bg меньше, чем холст (родительский элемент). Но все еще существует нерешенная мистическая головоломка, которая, я думаю, связана с тем, как flex помещает ребенка. прочитайте update2 внизу
update3 обходной путь - не работает
Я пытаюсь решить проблему, из-за которой фоновое изображение холста не появляется.
У меня есть приложение Flex 3.5, я установил высоту и ширину на 648x1008
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="1008" height="648"
в этом у меня есть 3 дочерних компонента холста. все они добавляются динамически и располагаются в 0,0, высота двух холстов, ширина устанавливается в 100%.
width="100%" height="100%"
Мой третий холст - это основной компонент, размер которого больше (4096x4096). у меня есть код для запуска и остановки перетаскивания этого холста в обработчики mousedown и up
mouseDown="mouseDownHandler()"
mouseUp="mouseUpHandler()"
width="{GameConfig.FULL_GAME_SCREEN_WIDTH}"
height="{GameConfig.FULL_GAME_SCREEN_HEIGHT}"
backgroundImage="{GameResource.bg}"
размеры определены в переменных в GameConfig.as
//game screen dimensions
public static const FULL_GAME_SCREEN_WIDTH:int = 4096;
public static const FULL_GAME_SCREEN_HEIGHT:int = 4096;
класс bg, определенный в переменной в GameResource.as
[Embed(source="../../../../assets/images/bg.jpg")]
public static const bg:Class;
путь к фоновому изображению идеален, я проверил, добавив фиктивное изображение на проблемный холст и установив тот же источник ({GameResource.bg})
Теперь проблема в том, что фоновое изображение вообще не появляется
Другие два холста не имеют какого-либо цвета фона, они просто имеют несколько компонентов (кнопок и изображений), расположенных внизу и сверху, что означает, что проблемный холст не скрыт за другим холстом. Самое главное, что дети внутри проблемного холста появляются
Я создал фиктивное приложение, которое работает нормально, исключая
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
height="600" width="800" layout="absolute"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
import com.fg.greenrev.config.GameResource;
]]>
</mx:Script>
<mx:Canvas id="bg" horizontalScrollPolicy="off" verticalScrollPolicy="off"
height="1600" width="4096"
backgroundColor="0xccbbdd"
backgroundImage="{GameResource.bg}"
mouseDown="{bg.startDrag(false,new Rectangle(-3296,-1000,3296,1000))}" mouseUp="{bg.stopDrag()}">
</mx:Canvas>
</mx:Application>
Может кто-нибудь, пожалуйста, помогите мне.
Update1:
Я только что изменил код, включил политику прокрутки основного приложения и удалил bgimage из проблемного холста в его дочерний холст, размер которого также совпадает с размером холста, и теперь bg появляется примерно в 2x (1400) экрана приложения высота и немного правее экрана (около 200 пикселей). Если переместить bgimage к проблемному холсту, он снова не появится. Кажется, проблема в том, как / где flex добавляет bgimage. Я предполагал, что это добавляет в 0,0, но похоже, что это не так.
Update2:
Я попытался создать фиктивное приложение, имитирующее сценарий с фиктивным кодом. Я сузил проблему, изменив FULL_GAME_SCREEN_HEIGHT на фактический размер bg (1600) . Ранее он был больше, чем BG (более чем в 2,5 раза). Теперь изображение отображается правильно. Похоже, проблема в том, что изгиб пытается положить изображение в центре холста.
Я мог бы повторить проблему, чтобы вы могли попробовать это в своей среде и посмотреть, что происходит
Главное приложение
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
height="600" width="800" layout="absolute"
creationComplete="init()">
<!--horizontalScrollPolicy="off" verticalScrollPolicy="off"-->
<mx:Script>
<![CDATA[
import _dummy.test1;
import _dummy.test2;
import _dummy.test3;
import com.fg.greenrev.config.GameResource;
private function init():void{
var t1:test1 = new test1();
addChild(t1);
t1.init();
var t2:test2 = new test2();
addChild(t2);
var t3:test3 = new test3();
addChild(t3);
}
]]>
</mx:Script>
</mx:Application>
** test1.mxml - дочерний компонент (проблема 1) *
<mx:Script>
<![CDATA[
import com.fg.greenrev.config.GameConfig;
import com.fg.greenrev.config.GameResource;
import mx.states.AddChild;
public function init():void{
var c1:test1Child = new test1Child();
addChild(c1);
}
]]>
</mx:Script>
<mx:Label x="10" y="10" text="Test1"/>
</mx:Canvas>
* test2.mxml - child2 (без проблем) *
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
width="100%" height="100%"
x="0" y="0">
<mx:Label x="96" y="0" text="Test2"/>
</mx:Canvas>
* test3.mxml - child3 (без проблем) *
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
width="100%" height="100%"
x="0" y="0">
</mx:Canvas>
* test1Child.mxml - child of child1 (нет проблем, но перемещение bg из test1.mxml сюда не имеет никакого значения в этом тестовом приложении, но делает diff в моем исходном приложении)
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
width="{GameConfig.FULL_GAME_SCREEN_WIDTH}"
height="{GameConfig.FULL_GAME_SCREEN_HEIGHT}"
>
<mx:Script>
<![CDATA[
import com.fg.greenrev.config.GameConfig;
]]>
</mx:Script>
<mx:Label x="390" y="0" text="Test1Child"/>
</mx:Canvas>
Как вы видите, test1 и test1Child имеют тот же размер и больше (огромный), чем основное приложение
child2 и child3 - 100% ширина и высота
замените FULL_GAME_SCREEN_WIDTH и FULL_GAME_SCREEN_HEIGHT на 4096. имейте фиктивное изображение 4096x1600 и запустите приложение, вы увидите, что bg лежит где-то в центре (вы можете увидеть изображение, если прокрутите приложение. Теперь измените FULL_GAME_SCREEN_H (размер bg), bg отображается отлично.
теперь есть два вопроса
q1) как заставить bg отображаться в центре родительского элемента, когда изображение bg меньше контейнера (parent / canvas)
q2) это действительно загадка, удивительно, что изображение bg появляется почти в правом углу (около 4000 пикселей), когда оно помещается на проблемный холст (в моем исходном приложении, test1.mxml в фиктивном), но отображается правильно, когда я переместил bg его ребенку (test1Child в тестовом приложении)
обновление 3 : обходной путь не работает
Я добавил это в качестве первой строки на холсте проблемы, появляется bg и охватывает оставшихся потомков. Я знал, что добавление его в первых строках делает его первым дочерним, что означает index = 0, что означает, что всегда остается обратной стороной, но, что удивительно, оно не только делает невидимым свой дочерний холст, но и перекрывает другие элементы управления, которые находятся внутри другого холста. Я также попытался динамически добавить изображение, используя addChildAt (img, 0), а также преднамеренно установил индекс в 0 с помощью setChildIndex (img, 0), но безрезультатно. Больной и усталый