ksoftware (ksoftware) wrote,
ksoftware
ksoftware

JavaScript в Fireworks

Разобрался немного с джаваскриптом в Фаере. Хочу рассказать вам.

Всё очень просто
В Фаере есть почти такие же экшены, как в фотошопе. Только в фотошопе надо включать запись, а в Фаере просто из истории действий выбираешь что хочешь и говоришь: сделать это скриптом.



Все скрипты — это просто джаваскриптовые файлы с расширением «.jsf», которые хранятся в папке ApplicationData. Например, у меня в Вин7 это C:\Users\Kolan\AppData\Roaming\Adobe\Fireworks CS5\Commands.


Типичный код вглядит так (тут создается три прямоугольника (см. картинку выше), затем один перемещаеся):

fw.getDocumentDOM().addNewRectanglePrimitive({left:264, top:88, right:376, bottom:175}, 0);
fw.getDocumentDOM().addNewRectanglePrimitive({left:320, top:267, right:432, bottom:317}, 0);
fw.getDocumentDOM().addNewRectanglePrimitive({left:446, top:208, right:545, bottom:251}, 0);
fw.getDocumentDOM().moveSelectionBy({x:-21, y:-59}, false, false);




Для взаимодействия с документом есть АПИ, которое можно найти тут: http://help.adobe.com/en_US/fireworks/cs/extend/index.html.

К сожалению, АПИ описано весьма скверно, но разобраться можно.

Пример
Программирование в графическом редакторе — это то, о чем я давно мечтал, потому что не имея такого инструмента, сделать действительно интересную инфографику невозможно.

Посмотрим как всё это работает на примере.

Не так давно я делал график про вред наркоты для википедии.


Делал я его классическим для себя образом: взял данные из ПДФки, засунул в эксель, построил график, сделал скриншот и обрисовал точки в Фаерворксе. При этом мне понадобилось пару раз повторить все, чтобы подобрать масштаб. Если бы график был раз в десять больше, я бы точно одурел и бросил.

Имея скрипты масштаб подбирать очень легко и количество точек никак не влияет на процесс. Поменял циферку, нажал кнопочку, всё строится само.

В исходной ПДФке была такая таблица:


С помощью простого копипаста и Нотпада++ она за пару секунд превращается в такой файл:

Heroin;2.78;2.8;2.5;3.0;3.00;3.0;3.0;3.0;2.54;1.6;3.0;3.0
Cocaine;2.33;2.0;2.0;3.0;2.39;3.0;2.8;1.3;2.17;1.8;2.5;2.3
Barbiturates;2.23;2.3;1.9;2.5;2.01;2.0;2.2;1.8;2.00;2.4;1.9;1.7
Street methadone;1.86;2.5;1.7;1.4;2.08;1.8;2.3;2.3;1.87;1.6;1.9;2.0
Alcohol;1.40;1.9;2.4;0;1.93;2.3;1.9;1.6;2.21;2.2;2.4;2.1
Ketamine;2.00;2.1;1.7;2.1;1.54;1.9;1.7;1.0;1.69;2.0;1.5;1.5
Benzodiazepines;1.63;1.5;1.7;1.8;1.83;1.7;2.1;1.8;1.65;2.0;1.5;1.5
Amphetamine;1.81;1.3;1.8;2.4;1.67;2.0;1.9;1.1;1.50;1.4;1.5;1.6
Tobacco;1.24;0.9;2.9;0;2.21;2.3;2.6;1.8;1.42;0.8;1.1;2.4
Buprenorphine;1.60;1.2;1.3;2.3;1.64;2.0;1.5;1.5;1.49;1.6;1.5;1.4
Cannabis;0.99;0.9;2.1;0;1.51;1.9;1.7;0.8;1.50;1.7;1.3;1.5
Solvents;1.28;2.1;1.7;0;1.01;1.7;1.2;0.1;1.52;1.9;1.5;1.2
4-MTA;1.44;2.2;2.1;0;1.30;1.0;1.7;0.8;1.06;1.2;1.0;1.0
LSD;1.13;1.7;1.4;0.3;1.23;2.2;1.1;0.3;1.32;1.6;1.3;1.1
Methylphenidate;1.32;1.2;1.3;1.6;1.25;1.4;1.3;1.0;0.97;1.1;0.8;1.1
Anabolic steroids;1.45;0.8;2.0;1.7;0.88;1.1;0.8;0.8;1.13;1.3;0.8;1.3
GHB;0.86;1.4;1.2;0;1.19;1.4;1.1;1.1;1.30;1.4;1.3;1.2
Ecstasy;1.05;1.6;1.6;0;1.13;1.5;1.2;0.7;1.09;1.2;1.0;1.1
Alkyl nitrites;0.93;1.6;0.9;0.3;0.87;1.6;0.7;0.3;0.97;0.8;0.7;1.4
Khat;0.50;0.3;1.2;0;1.04;1.6;1.2;0.3;0.85;0.7;1.1;0.8




А дальше пишется скрипт, который читает файл. Находит среднее по каждому параметру, рисует кружочки и подписывает их. Огромный плюс тут еще в том, что устраняется возможность человеческой ошибки (не то подписал, не тем цветом покрасил, не туда точку поставил или вообще забыл её и пр.).

Вот, собственно, скрипт. Читайте комменты.

/*Функция, которая умеет загружать текстовый файли и отдавать массив строк.*/
function loadFileAsStringArray(fileName, resultArr) {
var fileObj = Files.open(fileName, "UTF8", false);
if (fileObj == null) {
alert("Null");
};

var reading = true;
while (reading) {
var str = fileObj.readline();
reading = (str != null);
if (reading) {
resultArr[resultArr.length] = str;
};
};

fileObj.close();
};

//Очистить документ.
fw.getDocumentDOM().selectAll();
fw.getDocumentDOM().deleteSelection(false);

/*Константы.*/
var scale = 150;
var pointSize = 5;
var textShift = 7;

//Загрузить файл.
var points = [];
loadFileAsStringArray("file:///H|/MyDocuments/Blog/Drugs/Drugs.txt", points);

//Пройти по всем строкам из файла.
for (i=0;i<points.length;i++) {
//Разделить строку на элементы.
var lineArr = points[i].split(';');

//Вычислить среднее значение по каждому параметру.
var drugName = lineArr[0];
var drugPhysicalHarm = (parseFloat(lineArr[1]) + parseFloat(lineArr[2]) + parseFloat(lineArr[3]) + parseFloat(lineArr[4]))/4;
var drugDependence = (parseFloat(lineArr[5]) + parseFloat(lineArr[6]) + parseFloat(lineArr[7]) + parseFloat(lineArr[8]))/4;
var drugSocialHarm = (parseFloat(lineArr[9]) + parseFloat(lineArr[10]) + parseFloat(lineArr[11]) + parseFloat(lineArr[12]))/4;

//Рассчитать координаты с учетом масштаба.
var myLeft = drugDependence*scale;
var myTop = -drugPhysicalHarm*scale;

//Нарисовать прямоугольник.
fw.getDocumentDOM().addNewRectanglePrimitive({left:myLeft, top:myTop, right:myLeft+pointSize, bottom:myTop+pointSize}, 3);
fw.getDocumentDOM().setFillNColor({ category:"fc_Solid", ditherColors:[ "#000000", "#000000" ], edgeType:"antialiased", feather:0, gradient:null, name:"fn_Normal", pattern:null, shape:"solid", stampingMode:"blend opaque", textureBlend:0, webDitherTransparent:false }, "#990000");

//Вывести название наркотика.
textR = {
initialAttrs:{
alignment : "left",
size:"10pt",
face: "Arial",
fillColor: "#000000"

},
textRuns:[
{
changedAttrs:{},
characters:drugName
}
]
}
fw.getDocumentDOM().addNewText({left:myLeft + textShift, top:myTop + textShift, right:0, bottom:0}, true);
fw.getDocumentDOM().setTextRuns(textR);
}

//Веделить всё и сдвинуть, чтобы график не оказался за пределами листа.
fw.getDocumentDOM().selectAll();
fw.getDocumentDOM().moveSelectionBy({x:500, y:500}, false, false);


Замечу, что с джаваскриптом я работаю второй раз в жизни (первый был на прошлой неделе), поэтому тут может быть дебильный код.

Вот результат работы скрипта:


Дальше привести это к человеческому виду гораздо проще.

Пример можете запросто сами запустить. Сохраните код в файл с расширением, .jsf, положите его в папку с командами (см. выше путь), перезапустите Фаер, если он запущен, вызовите команду из меню Commands.
 
Только путь к текстовому файлу, который передаётся в loadFileAsStringArray, не забудьте поменять.
 
Ту би континьюд
Так как документация плохая, сразу написать подобную штуку может быть непросто. Я копал примеры (почему то на японском языке много примеров :) по добавлению текста, а с загрузкой файла вообще почти наугад писал, поэтому постараюсь сделать отдельные короткие посты по плоходокумментированным функциям.

P. S.
Удобная фишка: если выделить действие в окне с историей действий и нажать на значок копирования внизу этого окна, то в буфер попадет джаваскрипт-код указанного действия. Удобно при написание большого скрипта, сделал что-то, что не знаешь как писать, небольшое в отдельном файле, скопировали, вставил в большой скрипт, поменял параметры — готово.
 
Tags: Джаваскрипт, Код, Файрворкс
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 13 comments