FlashBuilder 4.5 :: Рендеринг текста без жизненного цикла для повышения дискретизации - PullRequest
Новая
       2

FlashBuilder 4.5 :: Рендеринг текста без жизненного цикла для повышения дискретизации

0 голосов
/ 09 сентября 2011

Мне нужно найти способ «повышать частоту» текста с 72 точек на дюйм (экран) до 300 точек на дюйм (печать) для визуализации сгенерированного клиентом текста. Это настоящее WYSIWYG-приложение, и мы ожидаем тонны трафика, поэтому отрисовка на стороне клиента является обязательным требованием. Наше приложение имеет несколько шрифтов, размеры шрифтов, цвета, выравнивания, которые пользователь может изменить в текстовой области. Вопрос в том, как конвертировать 72dpi в 300dpi. У нас есть готовый редактор, нам просто нужно сделать текстовую область с разрешением 300 точек на дюйм.

МОЯ ИДЕЯ

1) Получите текстовую область и увеличьте высоту, ширину и размер шрифта на 300/72. (если нужны размеры шрифта, мне может понадобиться увеличить шрифт, затем уменьшить размер до высоты / ширины)

2) использовать BitmapUtil.getSnapshot для текстовой области, чтобы получить визуализированную версию текста

ВОПРОС

Как отобразить текст внутри текстовой области без жизненного цикла компонента? Представьте себе: 

var textArea:TextArea = new TextArea();
textArea.text = "This is a test";    
var bmd:BitmapData = textArea.render();

Ответы [ 3 ]

0 голосов
/ 14 сентября 2011

Чтобы задать вопрос по-другому, можно создать в памяти TextArea, в котором я могу использовать функцию BitmapUtil.getSnapshot () для создания объекта BitmapData

Технически, всекомпоненты находятся в памяти.Я считаю, что вы хотите сделать компонент без его добавления в контейнер.

Мы делаем именно это для водяного знака на компонентах Flextras.Концептуально мы создали метод для визуализации экземпляра;как это: 

public function render(argInheritingStyles : Object):void{
 this.createChildren();
 this.childrenCreated();
 this.initializationComplete();
 this.inheritingStyles = argInheritingStyles;
 this.commitProperties();
 this.measure(); 
 this.height = this.measuredHeight;
 this.width = this.measuredWidth;
 this.updateDisplayList(this.unscaledWidth,this.unscaledHeight);
}

Метод должен быть вызван явно.Затем вы можете использовать «стандартную» процедуру для превращения компонента в растровое изображение.Я думаю, что мы используем метку;но тот же подход должен работать на любом данном компоненте.

0 голосов
/ 21 сентября 2011

Вот последний метод, который я использовал для решения проблемы создания печатной версии текста и стиля компонента Spark TextArea. В итоге я поместил пользовательский компонент TextAreaRenderer (см. Ниже) в MXML и установил для видимости значение false. Затем используйте ссылку на этот компонент для обработки любого текстового поля (renderObject) и получения объекта BitmapData. 

public class TextAreaRenderer extends TextArea implements IAssetRenderer
{

    public function render(renderObject:Object, dpi:int = 300):BitmapData{

        // CAST THE OBJECT
        //.................
        var userTextArea:TextArea = TextArea(renderObject);

        // SCALE IS THE DIVISION OF THE NEW DPI OVER THE SCREEN DPI 72
        //............................................................
        var scale:Number = dpi / 72;

        // COPY THE USER'S TEXT AREA INTO THE OFFSCREEN TEXT AREA
        //.......................................................
        this.text = userTextArea.text;                          // the actual text
        this.height = Math.floor(userTextArea.height * scale);  // scaled height
        this.width = Math.floor(userTextArea.width * scale);    // scaled width


        // GET THE LAYOUT FORMATS AND COPY TO OFFSCREEN
        // - the user's format =  userTextAreaLayoutFormat
        // - the hidden format = thisLayoutFormat
        //...............................................
        var editableLayoutProperties:Array = ['fontSize', 'fontFamily', 'fontWeight', 'fontStyle', 'textAlign', 'textDecoration', 'color']
        userTextArea.selectAll();
        var userTextAreaLayoutFormat:TextLayoutFormat = userTextArea.getFormatOfRange();
        this.selectAll();
        var thisLayoutFormat:TextLayoutFormat = this.getFormatOfRange();
        for each(var prop:String in editableLayoutProperties){
            thisLayoutFormat[prop] = userTextAreaLayoutFormat[prop];
        }

        // SCALE THE FONT SIZE
        //....................
        thisLayoutFormat.fontSize = thisLayoutFormat.fontSize * scale;

        // SET THE FORMAT BACK IN THE TEXT BOX
        //...................................
        this.setFormatOfRange(thisLayoutFormat);

        // REDRAW THE OFFSCREEN
        // RETURN THE BITMAP DATA
        //.......................
        this.validateNow();
        return BitmapUtil.getSnapshot(this);
    }
}

Затем вызывается TextAreaRenderer после изменения текстовой области для получения увеличенного растрового изображения. 

// COPY THE DATA INTO THE OFFSCREEN COMPONENT
//............................................
var renderableComponent:IAssetRenderer = view.offScreenTextArea;
return renderableComponent.render(userTextArea, 300);

Спасибо совету www.Flextras.com за решение этой проблемы со мной.

0 голосов
/ 09 сентября 2011

Как сказал Flextras, ширина / высота не имеет ничего общего с DPI, если вы на самом деле не увеличиваете приложение в 4.16X.Если ваше приложение имеет векторную графику, это не должно быть проблемой.Кроме того, концепция DPI теряется в любом веб-приложении, пока вы не попытаетесь сохранить / распечатать растровое изображение.

Это определенно возможно, но вам придётся разбираться в этом самостоятельно.

...