PDA

Просмотр полной версии : s:Panel maxWidth=20000 не работает!


Alex144
30.11.2010, 19:06
Проблема в следующем - по умолчанию во Flex 4 есть константа UIComponent.DEFAULT_MAX_WIDTH = 10000 пикселов, из которой берется значение максимальных размеров компонентов если не задан параметр maxWidth = ... , в моем примере я делаю масштабируемое поле 20000 на 20000 - при этом рисованые примитивы масштабируются нормально , а вот рамка от Panel застывает на 10000 и дальше не масштабируется - пример можно посмотреть тут http://www.ams64.ru/swf/path.swf

Может кто уже знает как решить эту проблему??? Help!!!!

пример программ:

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.core.FlexGlobals;
import mx.controls.*;
import mx.events.*;
import mx.graphics.SolidColor;

[Bindable]
public var PS:Number = 1;

[Bindable]
public var PAN:Number = 500;

private function changeSize():void
{
PS = hSlider.value/50;
PAN = hSlider.value*10;
}
]]>
</fx:Script>

<mx:VDividedBox id="hdivbox" width="100%" height="100%" maxWidth="20000">
<mx:HBox width="1000" height="60">
<mx:HSlider id="hSlider" width="500" minimum="0" maximum="2000" value="50" dataTipPlacement="top" tickColor="black" snapInterval="1" tickInterval="1" labels="['0%','1000%']" allowTrackClick="true" liveDragging="true" change="changeSize();"/>
</mx:HBox>

<mx:Canvas id="help" label="Help" width="100%" height="100%" maxWidth="20000" maxHeight="20000" horizontalScrollPolicy="on" verticalScrollPolicy="on">
<s:Panel id="p1" title="UIComponent.DEFAULT_MAX_WIDTH={UIComponent.DEFAULT_MAX_WIDTH} maxWidth={p1.maxWidth} ,а реально бордюр заканчивается на 10000 - а мне надо 20000" height="{PAN}" width="{PAN}" maxWidth="20000" maxHeight="20000" > <!-- creationComplete="complete()"-->

<s:Path scaleX="{PS}" scaleY="{PS}" data="M 100 100 L 100 200 L 200 200 L 200 100 Z">
<!-- Define the border color of the rectangle. -->
<s:stroke>
<s:SolidColorStroke color="0x888888" weight="0.5"/>
</s:stroke>
</s:Path>
<s:Path scaleX="{PS}" scaleY="{PS}" data="M 300 300 L 300 400 L 400 400 L 400 300 Z">
<!-- Define the border color of the rectangle. -->
<s:stroke>
<s:SolidColorStroke color="0x888888"/>
</s:stroke>
</s:Path>
</s:Panel>
</mx:Canvas>
</mx:VDividedBox>

ShockWave512
01.12.2010, 01:52
написать свой клаcс, на основе UIComponent?

alatar
01.12.2010, 11:22
Помимо компонента, скин у него тоже имеет свои ограничения на размер.
Позвольте спросить, а нафига это извращение нужно? Или это задел на будущее, когда мониторы будут с разрешением 35555х20000?

BeDLiNt
01.12.2010, 12:30
Зачееем?? У вас есть экран с разрешением 20 000 x 20 000 ?

ShockWave512
01.12.2010, 13:12
а если отключить cashAsBitmap ?

alatar
01.12.2010, 13:14
а если отключить cashAsBitmap ?
1. По-умолчанию он выключен.
2. Максимальные размеры битмапы меньше, чем 10000х10000.
3. При чем тут вообще cashAsBitmap?

ShockWave512
01.12.2010, 13:25
теперь могу себе сказать - "я это попробовал" :)

Alex144
01.12.2010, 16:04
Мда... Я думал тут есть знатоки Flexa ....

20000х20000 это просто полигон для отрисовки плана объекта в масштабе ....
в принципе все работает кроме дурацкой рамки от панели...

кто нибудь пробовал задавать вопросы в техподдержку адобба - как это сделать?

ShockWave512
01.12.2010, 16:07
кто нибудь пробовал задавать вопросы в техподдержку адобба - как это сделать?
думаешь там есть знатоки Flexa?

alatar
01.12.2010, 16:18
как это сделать?
Я вам уже написал. В spark компонентах размер, в основном, определяется параметрами его скина. То, что вы поменяли у maxWidth у компонента, еще ничего не значит (он-то как раз увеличивается), а вот у его скина maxWidth, так и остался 10000. Вот он и не увеличивается.

Добавлено через 13 минут
20000х20000 это просто полигон для отрисовки плана объекта в масштабе ....
Для таких вещей обычно применяются алгоритмы которые применяются в картах и играх с большими уровнями. К тому же, что мешает масштабировать сам план, а не панель в которой он отображается?

Alex144
01.12.2010, 16:42
alatar - Спасибо за дельный ответ.
применяются алгоритмы которые применяются в картах и играх с большими уровнями.
Можно немного по подробнее про эти алгоритмы и где посмотреть примеры?

alatar
01.12.2010, 16:48
Суть этого подхода в том, что исходное изображение разбивается на квадраты. Для каждого уровня увеличения генерируется свой набор. Одномоментно на экране видны лишь те области, которые собственно в этот экран попадают.
Если план векторный, то это не сильно актуально. Только если план не слишком сложный.

Добавлено через 1 минуту
где посмотреть примеры?
карты гугла (впрочем как и любая картографическая сиситема), чем не пример.

Alex144
01.12.2010, 17:05
Пробовал изменить скин для панели - никакого эффекта, вот код скина
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/22/changing-the-text-alignment-of-a-spark-panel-title-in-flex-4/ -->
<s:SparkSkin name="MaxWidthPanelSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5"
blendMode="normal"
mouseEnabled="false"
minWidth="131" minHeight="127"
maxWidth="20000" maxHeight="20000">
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" stateGroups="withControls" />
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>

<fx:Metadata>
[HostComponent("spark.components.Panel")]
</fx:Metadata>

<fx:Script>
<![CDATA[
/* Define the skin elements that should not be colorized.
For panel, border and title backround are skinned, but the content area and title text are not. */
static private const exclusions:Array = ["background", "titleDisplay", "contentGroup"];

override public function get colorizeExclusions():Array {
return exclusions;
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
if (getStyle("borderVisible") == true) {
border.visible = true;
background.left = background.top = background.right = background.bottom = 1;
contents.left = contents.top = contents.right = contents.bottom = 1;
} else {
border.visible = false;
background.left = background.top = background.right = background.bottom = 0;
contents.left = contents.top = contents.right = contents.bottom = 0;
}

dropShadow.visible = getStyle("dropShadowVisible");

var cr:Number = getStyle("cornerRadius");

if (cornerRadius != cr) {
cornerRadius = cr;
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}

[Bindable]
public var cornerRadius:Number;
]]>
</fx:Script>

<!-- drop shadow can't be hittable so it stays sibling of other graphics -->
<s:RectangularDropShadow id="dropShadow"
maxWidth="20000" maxHeight="20000"
blurX="20" blurY="20" alpha="0.32" distance="11"
angle="90" color="#000000" left="0" top="0" right="0" bottom="0"
tlRadius="{cornerRadius}" trRadius="{cornerRadius}"
blRadius="0" blRadius.withControls="{cornerRadius}"
brRadius="0" brRadius.withControls="{cornerRadius}" />

<!-- drop shadow can't be hittable so all other graphics go in this group -->
<s:Group left="0" right="0" top="0" bottom="0">
<!-- top group mask -->
<s:Group id="topGroupMask" left="1" top="1" right="1" bottom="1">
<s:Rect left="0" top="0" right="0" bottom="0"
maxWidth="20000" maxHeight="20000"
topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}"
bottomLeftRadiusX.withControls="{cornerRadius}"
bottomRightRadiusX.withControls="{cornerRadius}">
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
</s:Group>

<!-- bottom group mask -->
<s:Group left="1" top="1" right="1" bottom="1" id="bottomGroupMask"
includeIn="normalWithControlBar, disabledWithControlBar">
<s:Rect left="0" top="0" right="0" bottom="0"
maxWidth="20000" maxHeight="20000"
topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}"
bottomLeftRadiusX.withControls="{cornerRadius}"
bottomRightRadiusX.withControls="{cornerRadius}">
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
</s:Group>

<!-- layer 1: border -->
<s:Rect id="border" left="0" right="0" top="0" bottom="0"
maxWidth="20000" maxHeight="20000"
topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}"
bottomLeftRadiusX.withControls="{cornerRadius}"
bottomRightRadiusX.withControls="{cornerRadius}" >
<s:stroke>
<s:SolidColorStroke color="{getStyle('borderColor')}" alpha="{getStyle('borderAlpha')}" weight="1" />
</s:stroke>
</s:Rect>

<!-- layer 2: background fill -->
<!--- Defines the appearance of the PanelSkin class's background. -->
<s:Rect id="background" left="1" top="1" right="1" bottom="1"
maxWidth="20000" maxHeight="20000"
topLeftRadiusX="{cornerRadius}" topRightRadiusX="{cornerRadius}"
bottomLeftRadiusX.withControls="{cornerRadius}"
bottomRightRadiusX.withControls="{cornerRadius}">
<s:fill>
<!-- Defines the PanelSkin class's background fill. The default color is 0xFFFFFF. -->
<s:SolidColor color="{getStyle('backgroundColor')}"
alpha="{getStyle('backgroundAlpha')}" />
</s:fill>
</s:Rect>

<!-- layer 3: contents -->
<!--- contains the vertical stack of titlebar content and controlbar -->
<s:Group id="contents" left="1" right="1" top="1" bottom="1">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>

<s:Group id="topGroup" mask="{topGroupMask}">
<!-- layer 0: title bar fill -->
<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1" >
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xE2E2E2" />
<s:GradientEntry color="0xD9D9D9" />
</s:LinearGradient>
</s:fill>
</s:Rect>

<!-- layer 1: title bar highlight -->
<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xEAEAEA" />
<s:GradientEntry color="0xD9D9D9" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>

<!-- layer 2: title bar divider -->
<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
<s:fill>
<s:SolidColor color="0xC0C0C0" />
</s:fill>
</s:Rect>

<!-- layer 3: text -->
<!--- Defines the appearance of the PanelSkin class's title bar. -->
<s:Label id="titleDisplay" maxDisplayedLines="1"
left="9" right="3" top="1" bottom="0" minHeight="30"
verticalAlign="middle" fontWeight="bold"
textAlign="center" />
</s:Group>

<!-- Note: setting the minimum size to 0 here so that changes to the host component's
size will not be thwarted by this skin part's minimum size. This is a compromise,
more about it here: http://bugs.adobe.com/jira/browse/SDK-21143 -->
<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />

<s:Group id="bottomGroup" minWidth="0" minHeight="0"
includeIn="normalWithControlBar, disabledWithControlBar">
<s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
<!-- layer 0: control bar divider line -->
<s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>

<!-- layer 1: control bar highlight -->
<s:Rect left="0" right="0" top="1" bottom="0">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xE5E5E5" />
<s:GradientEntry color="0xD8D8D8" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>

<!-- layer 2: control bar fill -->
<s:Rect left="1" right="1" top="2" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xDADADA" />
<s:GradientEntry color="0xC5C5C5" />
</s:LinearGradient>
</s:fill>
</s:Rect>
</s:Group>
<!-- layer 3: control bar -->
<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
<s:layout>
<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
</s:layout>
</s:Group>
</s:Group>
</s:Group>
</s:Group>

</s:SparkSkin>

alatar
01.12.2010, 17:10
Для Group не выставили.

Alex144
01.12.2010, 17:22
Для Group не выставили.

Выставил везде - не помогло...

alatar
01.12.2010, 17:25
Значит где-то забыли. На практике не проверял, даже в голову такое не приходило :)
К тому же Adobe не гарантирует, что компоненты можно растянуть больше чем на 10000х10000.

Alex144
01.12.2010, 17:32
я нашел в файлах SDK 4.1 UIComponent.as упоминание про дефолтный размер
public static const DEFAULT_MAX_WIDTH:Number = 10000;

// When changing this constant, make sure you change

// the constant with the same name in LayoutElementUIComponentUtils


то есть можно менять - но во всех местах сразу, изменил - ни какого эффекта :(

к тому же CANVAS нормально переваривает координаты больше 10000 - PATH рисует примитивы с любыми координатами, а вот рамка панели нифига и координаты мыши тоже стопорятся только в пределах координат панели - 10000х10000

alatar
01.12.2010, 17:45
const здесь не зря. Не путайте комментарии для разработчиков SDK с документацией для разработчиков использующих SDK.
К тому же там упоминается LayoutElementUIComponentUtils.
LayoutElementUIComponentUtils
Helper class to implement the ILayoutElement interface for IUIComponent
ILayoutElement
Интерфейс ILayoutElement в основном используется классами макета для запроса, установки размера и размещения элементов контейнеров GroupBase.

Добавлено через 1 минуту
В LayoutElementUIComponentUtils есть слудующий код:
// When changing these constants, make sure you change
// the constants with the same name in UIComponent
private static const DEFAULT_MAX_WIDTH:Number = 10000;
private static const DEFAULT_MAX_HEIGHT:Number = 10000;


Добавлено через 4 минуты
Как возможный вариант, создайте в проекте пакет mx.core, скопируйте туда UIComponent и LayoutElementUIComponentUtils и поменяйте в них константы.
Только удалите в обоих файлах:
include "../core/Version.as";

Alex144
01.12.2010, 17:51
Я исправлял везде 10000 на 20000 - не помогло.
может при компиляции можно как то влиять на эту константу или пересобрать библиотеки самого SDK?

alatar
01.12.2010, 17:51
Но, благими намерениями выстлана дорога в ад это все таки неправильный путь.

Добавлено через 1 минуту
ли пересобрать библиотеки самого SDK
См. конец предущего комментария.

Alex144
01.12.2010, 18:13
на счет пакета mx.core интересная идея, но сначала я посмотрю что ответит support в адобе, ща пишу им письмо в адрес Russian_support@adobe.com

дело в том что maxWidth вообще не на что не влияет - даже если я его ставлю 500 :)

alatar
01.12.2010, 18:25
но сначала я посмотрю что ответит support в адобе
Он вам ответит, что:
а) максимальная высота и ширина компонентов 10000
б) maxWidth влияет на автоматическое изменение размеров (например, при выставлении width="100%" или left="0", right="0"), т.е. когда размеры компоненту пытается задать, скажем, layout.

Добавлено через 14 минут
Точнее даже просто процитируют:
maxWidth свойство
maxWidth:Number

Язык версии: ActionScript 3.0
Версия продукта: Flex 3
Версии среды выполнения: Flash Player 9, AIR 1.1

Рекомендованная максимальная ширина компонента, принимаемая вышестоящим элементом при создании макета. Это значение представлено в координатах компонента в пикселях. Для этого свойства разработчиком компонента установлено значение по умолчанию.

Разработчик компонента использует это свойство для установки верхней границы для ширины компонента.

Если разработчик приложения изменяет значение по умолчанию maxWidth, новое значение сохранятся в explicitMaxWidth. Значение maxWidth по умолчанию не изменяется. В итоге, если в ходе создания макета свойство maxWidth установлено разработчиком приложения явно, значение explicitMaxWidth используется как рекомендованное для компонента максимальное значение ширины. Если maxWidth не установлено пользователем явно, используется значение по умолчанию.

Это значение используется контейнером при вычислении размера и позиции компонента. Оно не используется самим компонентом при определении его размера по умолчанию. Таким образом, это свойство может не оказывать влияния, если оно является нижестоящим для контейнера или контейнеров, которые не применяют коэффициент в этом свойстве. Поскольку значение находится в координатах компонента, свойство scaleX влияет на значение true maxWidth относительно его вышестоящего элемента. Некоторые компоненты не имеют теоретической границы по ширине. В таких случаях их значение maxWidth будет установлено на UIComponent.DEFAULT_MAX_WIDTH.

Значением по умолчанию является 10000.

BeDLiNt
02.12.2010, 10:22
IViewPort