Установить ось Flex Flex AxisRenderer с помощью CSS - PullRequest
0 голосов
/ 17 декабря 2009

Я пытаюсь установить стиль axisStroke для AxisRenderer через CSS. Это типа IStroke. Как мне создать обводку в CSS?

Ответы [ 5 ]

1 голос
/ 22 октября 2010

@ Джеймс:

Похоже, небольшая ошибка здесь:

if ((getStyle("axisStrokeColor") != null) && (getStyle("axisStrokeColor") != null))
    {
        var axisStroke:Stroke = new Stroke(getStyle("axisStrokeColor"), getStyle("axisStrokeColor"));

Повторение axisStrokeColor дважды. Думаю, вы также хотели сослаться на strokeWeight:

if ((getStyle("axisStrokeWeight") != null) && (getStyle("axisStrokeColor") != null))
            {
                var axisStroke:Stroke = new Stroke(getStyle("axisStrokeColor"), getStyle("axisStrokeWeight"));
1 голос
/ 23 августа 2010

Кто-то :) предложил мне опубликовать ссылку на свой InsideRIA о том, как «настроить» CSSStyleDeclaration, чтобы добавить информацию об обводке, чтобы вам не приходилось переопределять AxisRenderer (или вообще иметь явный AxisRenderer) http://insideria.com/2010/08/usinc-css-for-strokes-on-flex.html,

Кроме того, я хотел бы добавить, что я начал работать с пользовательскими стилями немного иначе, чем это показывают примеры. Это выглядит примерно так:

    protected var _myStyleValue:SomeType = someValueThatWouldNeverOccurInNature;
    protected var _myThingTheStyleIsAttachedTo:IStyleClient;
    //set this flag whenever you want to refresh the object
    protected var _myThingTheStyleIsAttachedToChanged:Boolean;

    override protected function commitProperties():void {
        if (_myThingTheStyleIsAttachedToChanged) {
            var myStyleValue:SomeType = getMyStyleValue();
            _myThingTheStyleIsAttachedTo.setStyle('myStyle', myStyleValue);
            _myThingTheStyleIsAttachedToChanged = false;
        }
    }

    override public function styleChanged(styleProp:String):void {
        super.styleChanged(styleProp);
        if (styleProp=='myStyle') {
            _myThingTheStyleIsAttachedToChanged = true;
            _myStyleValue = someValueThatWouldNeverOccurInNature;
        }
    }

    protected function getMyStyleValue():SomeType {
        if (_myStyleValue==someValueThatWouldNeverOccurInNature) {
            var theValue:*=getStyle('myStyle');
            if (theValue==undefined) {
                _myStyleValue=theDefaultValue;
            } else {
                _myStyleValue=theValue as SomeType;
            }
            return _myStyleValue;
        }
    }

Это немного более многословно, чем то, что вы обычно видите, особенно если вам нужно рассмотреть несколько свойств. Тем не менее, он обходит стороной проблемы, связанные со стилями, применяемыми в объявлении стиля MXML и CSS, а также с тем, что происходит при изменении стиля. Он также "ленивый", и поэтому может не вызываться, если он не нужен.

1 голос
/ 19 декабря 2009

Почему бы не попробовать мой (правда, несколько сумасшедший) трюк пост-обработки CSS: http://bitrotincarnate.wordpress.com/2009/12/16/strokes-and-fills-in-flex-css-through-actionscript-injection/

0 голосов
/ 20 августа 2010

Не уверен, что я понимаю все вышеизложенное в вашей логике кода, хотя понимаю ее назначение. ; -)

Однако, полагаясь только на styleChanged (), у меня ничего не вышло. Особенно, если я переключал стили CSS во время выполнения, и в новом объявлении стиля не было "axisStroke" - что, конечно, не может! Более полное решение будет включать код для styleChanged (), а также stylesInitialized (). В источник я также включил ссылку на объект обводки _axisStroke. Это сокращает количество вызовов getStyle ("axisStroke"), а также является необходимым для приведенной ниже логики гарантированной реализации.

Как я уже сказал, моя проблема заключалась в том, что я получал бы ошибки во время выполнения, если бы я объявил запись стиля в CSS для компонента средства визуализации оси, но не установил его свойство стиля "axisStroke" программно. Хотя обходным путем для этого обычно является создание экземпляра CSSStyleDeclaration по умолчанию в статическом методе classConstructed () (см. Руководство разработчика Adobe и стили для этой общей практики), это не будет работать, если стиль CSS динамически изменяется во время выполнения. ClassConstructed () вызывается только вначале и обычно проверяет, нет ли уже декларации стиля для компонента перед регистрацией по умолчанию. Затем, когда вы меняете стили, стиль вашего компонента «axisStroke» очищается. ПОТОМ, вы можете получить нулевые исключения. Кроме того, просто используя CSS, вы не можете вставить новый стиль "axisStroke". Но, так как stylesInitialized () вызывается в любое время, когда изменяется настройка селектора стиля компонента - например, StyleManager.setStyleDeclaration («MyComponent», myStyleDeclaration) - вы можете убедиться, что все стили установлены и находятся на своем месте, а также все, что может выдавать ноль исключение, такое как отсутствующий стиль "axisStroke", может быть учтено.

private var _axisStroke:IStroke;
override public function stylesInitialized():void {
  super.stylesInitialized();
  _axisStroke = getStyle("axisStroke");
  if (!_axisStroke) {
    //usually a default stroke style is set in a default CSSStyleDeclaration
    //created in a classConstructed() method
    _axisStroke = new Stroke(0xCCDDEE, 8, 1, false, LineScaleMode.NORMAL, CapsStyle.NONE);
    //note: I do NOT register _axisStroke to the style "axisStroke".
    //Since "axisStroke" is still technically not set, I leave it null.
    //You may need to set it, however, if you are extending AxisRenderer.
    //setStyle("axisStroke", _axisStroke);
  }
  var axisColor:Number = getStyle("axisColor");
  if (!isNaN(axisColor)) {
    Object(_axisStroke).color = axisColor;
  }
  ...
}

В любом случае, если у вас просто работает styleChanged (), отлично. Но если вы по-прежнему получаете ошибки времени выполнения из-за того, что стили не инициализированы или имеют неправильный порядок, изучите использование stylesInitialized (). Это особенно полезно при создании собственных классов IAxisRenderer.

0 голосов
/ 24 декабря 2009

Решение, которое я наконец-то использовал, состояло в том, чтобы создать собственное расширение AxisRenderer, которое предоставило нужные мне стили:

package
{
  import mx.charts.AxisRenderer;
  import mx.graphics.Stroke;

  [Style(name="axisStrokeColor", type="uint", format="Color", inherit="yes")]
  [Style(name="axisStrokeWeight", type="Number", format="Length", inherit="yes")]

  [Style(name="minorTickStrokeColor", type="uint", format="Color", inherit="yes")]
  [Style(name="minorTickStrokeWeight", type="Number", format="Length", inherit="yes")]

  [Style(name="tickStrokeColor", type="uint", format="Color", inherit="yes")]
  [Style(name="tickStrokeWeight", type="Number", format="Length", inherit="yes")]

  public class StyledAxisRenderer extends AxisRenderer
  {

    override public function styleChanged(styleProp:String):void
    {
      super.styleChanged(styleProp);

      var stylesUpdated:Boolean = false;

      if ((styleProp != "axisStroke") && (styleProp != "minorTickStroke") && (styleProp != "tickStroke"))
      {
        if ((getStyle("axisStrokeColor") != null) && (getStyle("axisStrokeWeight") != null))
        {
            var axisStroke:Stroke = new Stroke(getStyle("axisStrokeColor"), getStyle("axisStrokeWeight"));
            setStyle("axisStroke", axisStroke);

            stylesUpdated = true;
        }

        if ((getStyle("minorTickStrokeColor") != null) && (getStyle("minorTickStrokeWeight") != null))
        {
            var minorTickStroke:Stroke = new Stroke(getStyle("minorTickStrokeColor"), getStyle("minorTickStrokeWeight"));
            setStyle("minorTickStroke", minorTickStroke);

            stylesUpdated = true;
        }

        if ((getStyle("tickStrokeColor") != null) && (getStyle("tickStrokeWeight") != null))
        {
            var tickStroke:Stroke = new Stroke(getStyle("tickStrokeColor"), getStyle("tickStrokeWeight"));
            setStyle("tickStroke", tickStroke);

            stylesUpdated = true;
        }

        if (stylesUpdated)
        {
          invalidateDisplayList();
        }
      }
    }
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...