Холст для работы с графикой

30.03.2019

Объект Image может работать в двух режимах - отображения графического файла и в качестве холста для рисования. Объект создаётся с использованием конструктора CreateImage:

app.CreateImage( (null или str ) file, int width, int height, [(str)] options, float w, float h )

Параметры:

file - название графического файла или null для перевода в режим холста

width - ширина изображения или холста. В режиме холста должна быть > 0, иначе возникнет ошибка. Если в режиме отображения значение = -1, а height > 0, то ширина изображения будет пропорциональна заданной высоте

height - высота изображения или холста. В режиме холста должена быть > 0, иначе возникнет ошибка. Если в режиме отображения значение = -1, а width > 0, то высота изображения будет пропорциональна заданной ширине

options - дополнительные опции:

Alias - отображать без сглаживания
Asunc - асинхронная загрузка
Fix - режим фиксации размеров опциями w и h в конструкторе
FontAwesome – разрешить использовать пиктограмм при выводе текста
Resize – измененяет размер изображения до ширины экрана для уменьшения занимаемой памяти
ScaleCenter - масштабировать по центру
Square - сделать изображение квадратным при заданной ширине или высоте
Icon - задаёт режим отображения изображения как значка
fix - исправить. Используется для уменьшения разрешения изображения, значения которых указываются в параметрах w и h.

w - масштаб по ширине

h - масштаб по высоте

TouchThrough - пропускает события касания сквозь себя

Холст по умолчанию имеет прозрачный фон.

Базовый пример

Выполнить в DS

var myObject = null;
var myImage = null;
var myImageCanvas = null;

function OnStart()
{
    var _mtx = null;

var _layMain = (function(){
    	var _object = app.CreateLayout( "Linear", "left, top, FillXY" );
        return _object;
    })();
    
	myImage = app.CreateImage( "/Sys/Img/Hello.png");
	
	myImageCanvas = app.CreateImage( null, 0.5, 0.3 );
	
	myImageCanvas.SetAutoUpdate( false );
	myImageCanvas.DrawImage( myImage, 0, 0, 1, 1 );
	myImageCanvas.Update();

_layMain.AddChild( myImageCanvas );

_layMain.AddChild( (function(){
    	var _object = app.CreateImage( null, 0.5, 0.5 );

_object.SetColor( "#ff220000" ); 
    	_object.SetPaintColor( "#ffff0000"  );
    	_object.DrawPoint( 0.3, 0.3 );
    	_object.SetLineWidth( 2.5 );
    	_object.SetPaintColor( "#ff007733"  );
    	_object.DrawLine( 0.6, 0.2, 0.9, 0.1 );
    	_object.SetPaintColor( "#ff337799"  );
    	_object.DrawCircle( 0.2, 0.2, 0.1 );
    	_object.SetTextSize( 24 );
    	_object.SetPaintColor( "#ffffff00"  );
    	_object.DrawText( "Текст", 0.1, 0.8 );
    	_object.SetPaintColor( "#88ff4444"  );
    	_object.DrawRectangle( 0.1, 0.1, 0.2, 0.2 );
    	_object.SetPaintStyle( "Line" );
    	_object.SetPaintColor( "#ff00aa00" );
    	_object.DrawCircle( 0.3, 0.5, 0.05 );

myObject = _object;

return _object;
    })() );
    
    app.AddLayout( _layMain );
}

Методы:

AdjustColor( int hue, int sat, int bright, int cont ) - задаёт цветовой фильтр с оттенком, насыщенностью, яркостью и контрастностью для флажка. Возможны отрицательные значения

Выполнить в DS

myObject.AdjustColor( 120,10,-60,0 );

Clear() - ощищает холст

Выполнить в DS

myObject.Clear();

Draw( func, p1, p2, p3, p4, p5, p6, p7 ) - не документировано

DrawArc( float x1, float y1, float x2, float y2, float start, int sweep ) - рисует дугу

Выполнить в DS

myObject.DrawArc( 0.65, .27, 0.75, 0.33, 0, -90 );

DrawCircle( float x, float y, float radius ) - рисует окружность с заданным центром и радиусом

Выполнить в DS

myObject.DrawCircle( 0.4, 0.4, 0.3 );

DrawFrame( int ms) - не документировано (вызывает ошибку на этапе запуска)

DrawImage( {} image, int x, int y, int w, int h, int angle, str mode ) - выводит изображение

Выполнить в DS

myObject.DrawImage( myImage, 0, 0, 0.2, 0.3 );

DrawImageMtx( {} image, [] matrix ) - выводит изображение с использованием матрицы трансформации. Для работы данного метода необходимо выключить автообновление холста, вызвав метод SetAutoUpdate(false)

Выполнить в DS

myImageCanvas.SetAutoUpdate(false); myImageCanvas.Clear(); _angle = 45 * Math.PI/180; myImageCanvas.DrawImageMtx( myImage ,[ Math.cos(_angle),-Math.sin(_angle),0, Math.sin(_angle),Math.cos(_angle),0, 0,0,1 ]); myImageCanvas.Update();

DrawLine( float x1, float y1, float x2, float y2 ) - рисует линию по двум заданным точкам

Выполнить в DS

myObject.DrawLine( 0, 0, 1, 1 );

DrawPoint( float x, float y ) - рисует точку в заданной координате

Выполнить в DS

myObject.DrawPoint( 0.2, 0.2 );

DrawRectangle( float x1, float y1, float x2, float y2 ) - рисует прямоугольник по заданным двум точкам (левый верхний угол и правый нижний)

Выполнить в DS

myObject.DrawRectangle( 0, 0, 1, 1 );

DrawText( str txt, float x, float y ) - выводит текст в заданной координате (левый верхний угол)

Выполнить в DS

myObject.DrawText( 'Текст', 0.1, 0.1 );

DrawSamples( [int] data, float range ) - быстрое построение качественных графиков с заданным массивом y-координат точек и диапазоном по Y. Он строится из центра холста, а ось Y направлена вниз. При увеличении количества точек график сжимается по оси X (как пружина). Данный метод можно использовать, например, для отображения формы звуковой волны (сэмпла)

Выполнить в DS

myObject.DrawSamples( [0,1,-10,5,8,10], 10);

Flatten() - сохраняет применённую к изображению трансформацию так, что она будет автоматически добавляться в дальнейшем к любым методам транформации (или при повторном использовании метода Flatten). Например, если изображение было повёрнуто на 45 градусов и далее использовался Flatten, то при вызове далее, например, метода изменения масштаба, к этому действию добавится сохранённая во Flatten трансформация - поворот на 45 градусов. В результате изображение повернётся на 90 градусов

Выполнить в DS

myObject.Rotate( 45 );myObject.Flatten();myObject.Scale( 0.5, 0.5 );

GetAbsHeight():int - возвращает высоту холста в пикселях

Выполнить в DS

app.ShowPopup( myObject.GetAbsHeight() );

GetAbsWidth():int - возвращает ширину холста в пикселях

Выполнить в DS

app.ShowPopup( myObject.GetAbsWidth() );

GetHeight():int - возвращает высоту холста

Выполнить в DS

app.ShowPopup( myObject.GetHeight() );

GetName():str - возвращает название изображения

Выполнить в DS

app.ShowPopup( myObject.GetName() );

GetPixelColor( int x, int y ):str - возвращает цвет заданной точки

Выполнить в DS

app.ShowPopup( myObject.GetPixelColor( 10, 20 );

GetPixelData( ('rawbase64', 'pngbase64', 'jpgbase64' ) format, int left, int top, int width, int height ) - возвращает массив пикселей заданной области в заданном формате

Выполнить в DS

app.ShowPopup( myObject.GetPixelData('pngbase64', 0, 0, 10, 10) );

GetType():str - возвращает тип объекта

Выполнить в DS

app.ShowPopup( myObject.GetType() );

GetWidth():int - возвращает ширину холста

Выполнить в DS

app.ShowPopup( myObject.GetWidth() );

MeasureText( str text ):{} - возвращает ширину и высоту строки текста

Move( float x, float y ) - перемещает холст в заданную левым верхним углом точку экрана

Выполнить в DS

myObject.Move( 0.5, -1 );

Reset() - отмена трансформаций холста

Выполнить в DS

myObject.Reset();

Rotate( int angle, float pivX, float pivY ) - поворачивает холст на заданный угол относительно заданного центра трансформации

Выполнить в DS

myObject.Rotate( 90, 0.5, 0.5 );

Save( str fileName, quality ) - сохраняет изображение в файл, с заданным качеством

Выполнить в DS

myObject.Save( '/sdcard/DroidScript/myFile.png' );

Scale( float x, float y ) - масштабирует холст (1 - оригинальный размер, меньше 0 - уменьшение, больше 1 - увеличение)

Выполнить в DS

myObject.Scale( 0.5, 0.5 );

SetAlpha( (0..1) alpha ) - задаёт прозрачность

Выполнить в DS

myObject.SetAlpha( 0.5 );

SetAutoUpdate( bool onoff ) - задаёт режим автоматического обновления холста

Выполнить в DS

myObject.SetAutoUpdate( false );

SetColor( str clr ) - задаёт цвет фона холста

Выполнить в DS

myObject.SetColor( '#ff337733' );

SetColorFilter( str clr, str mode ) - устанавливает цвет и режим Porter-Duff его наложения

Выполнить в DS

myObject.SetColorFilter( '#ffff0000', 'Add' );

SetFontFile( str file ) - задаёт файл шрифта

Выполнить в DS

myObject.SetFontFile ( '/system/fonts/clockopia.ttf' );

SetImage( {} image, int width, int height, ('rescale') options ) - задаёт изображение с указанием новых размеров. При отсутствии параметров старое изображение сохраняет размеры

Выполнить в DS

myObject.SetImage( 'myImage.png', 0.5, -1);

SetLineWidth( int width ) - задаёт толщину линии

Выполнить в DS

myObject.SetLineWidth( 4 );

SetMaxRate( int rate ) - ограничивает количество событий, возникающих при перемещении пальца, путём задания минимального интервала в мс между двумя событиями onTouch

Выполнить в DS

myObject.SetValue( 1000 );

SetName( str name ) - задаёт название для изображения

Выполнить в DS

myObject.SetName( 'Моя собачка' );

SetOnLoad( callback ) - задаёт ФОВ для реагирования на окончание загрузки изображения

Выполнить в DS

myObject.SetOnLoad( function(){ app.ShowPopup( 'Изображение загружено' ); });

SetOnLongTouch( callback ) - задаёт ФОВ для обработки долгого касания

Выполнить в DS

myObject.SetOnLongTouch( function(){ app.ShowPopup( 'Долгое касание' ); });

SetOnTouch( callback ) - задаёт ФОВ для обработки короткого прикосновения

Выполнить в DS

myObject.SetOnTouch( function(){ app.ShowPopup( 'Прикоснулись палецем' ); });

SetOnTouchDown( callback ) - задаёт ФОВ для обработки касания

Выполнить в DS

myObject.SetOnTouchDown( function(){ app.ShowPopup( 'Коснулись пальцем' ); });

SetOnTouchMove( callback ) - задаёт ФОВ для обработки перемещения

Выполнить в DS

myObject.SetOnTouchMove( function(){ app.ShowPopup( 'Перемещение палеца' ); });

SetOnTouchUp( callback ) - задаёт ФОВ для обработки отпускания

Выполнить в DS

myObject.SetOnTouchUp( function(){ app.ShowPopup( 'Отпустили палец' ); });

SetPaintColor( str clr ) - задаёт цвет обводки

Выполнить в DS

myObject.SetPaintColor( '#ff000099' );

SetPaintStyle( (str) style ) - задаёт режим рисования ("fill" - заполнение, 'both' заполнение и контур, иначе контур)

Выполнить в DS

myObject.SetPaintStyle( 'line' );

SetPixelData( str data,int width,int height,str options) - принимает строку в формате base64

SetPixelMode( bool onoff ) - включает/выключает режим работы всех функций рисования в пикселях

Выполнить в DS

myObject.SetPixelMode( true );

SetSize( float width, float height ) - задаёт ширину и высоту холста

Выполнить в DS

myObject.SetSize( 0.5, 0.5 );

SetTextSize( int size, ('px','dip','sp','mm', 'pt') mode ) - задаёт размер шрифта надписи

Выполнить в DS

myObject.SetTextSize( 17 );

SetTouchable( bool touchable ) - запрещает (false) или разрешает (true) реакцию на касание

Выполнить в DS

myObject.SetTouchable( false );

Skew( float x, float y ) - скос холста

Выполнить в DS

myObject.Skew( 0.5, -1 );

Transform( matrix ) - не документировано

Update() - обновляет изображения на холсте (используется в режиме ручного обновления)

Выполнить в DS

myObject.Update();