CEP开发基础知识-AI|PS|AE插件-事件机制-文件操作-界面颜色

1.事件机制

CEP 扩展通过事件（Event）来捕获宿主应用（如 PhotoShop）的各种操作和状态的变化，当宿主应用（如 PhotoShop） 进行各种操作和状态的变化时就会发送事件，在 CEP 的 JavaScript 可以中通过监听器把方法和事件类型绑定，每当事件发生，就会执行绑定的方法。同时也可以发送自定义的事件，而且在 ExtendScript 中也可以发送事件，这就可以在 ExtendScript 与 CEP 的 JavaScript 间传递信息和数据了。

1.1.事件属性

事件（Event）作为一个对象，有以下属性：

属性名称作用type类型用来识别事件的名称scope作用范围可设置为"APPLICATION" （当前宿主应用）或者 “GLOBAL” （全局）appId应用 ID生成事件的宿主应用的识别名称。可选extensionId扩展 ID生成事件的扩展的识别名称。可选data数据事件携带的数据，用来传递信息

CEP 事件分为 2 种：

宿主程序事件，PhotoShop 启动、打开文档等会产生的这类事件，这种事件有自己的类型（type），例如：applicationActivate、documentAfterActivate。自定义事件，用户自己创建并发送的 CEP 事件。

ExtendScript 事件，也是宿主活动产生的事件，但与前 1 种并不一样，你不能从某个类型（type）来识别和捕获这种事件，而必须注册要监听的事件，并通过 com.adobe.PhotoshopJSONCallback 事件集中监听 ExtendScript 事件，并自己通过 eventID 判断接受到的是何种事件。可以说 ExtendScript 事件是另一套事件系统，而它实际上通过 CEP 事件来传递。

1.2.监听事件

通过 csInterface.js 提供的 addEventListener(type,function) 可以把一个方法绑定给一种事件，每当这种事件发生，就调用这个方法，并传递此次事件的 Event 对象。

Event 对象的属性在前面已经说过了 event.data 属性中会有事件的信息，如果是宿主程序事件一般是 XML 字符串，而 ExtendScript 事件是 JSON 字符串。

下面这个示例把方法 PSCallback()绑定给了 documentAfterActivate（文档被激活）事件，当 PhotoShop 中切换到某个文档时就会收到调用PSCallback()，并且传递事件对象，通过访问事件对象的 .data 属性会得到XML格式表达的数据：“2个VM差别file:///E:/工作/Adobe 扩展开发/2 个 VM 差别.psd”

var cs = new CSInterface();
cs.addEventListener("documentAfterActivate" , PSCallback); //applicationActivate : 文档被激活

function PSCallback(event) //处理事件的函数，会接受到一个 Event 对象
{
    alert(event.data);/***  2个VM差别file:///E:/工作/Adobe 扩展开发/2 个 VM 差别.psd  ***/
}

另外 addEventListener()也支持匿名函数，上面的例子可以简化为：

new CSInterface().addEventListener(
    "documentAfterActivate", function (event){ alert(event.data) ;}
)

1.3.取消监听

通过 removeEventListener( ) 可以取消监听绑定：

var cs = new CSInterface();
cs.removeEventListener("documentAfterActivate" , PSCallback);

1.4.发送事件

除了监听宿主应用的事件，我们自己也可以发送事件.

1.4.1.CEP JavaScript 端

通过创建一个 Event 对象再使用 CSInterface 的 dispatchEvent() 方法，就可以发送一个事件，这样发送的信息根据事件 type 就能简单的捕获。

var cs = new CSInterface();
var event = new CSEvent(); // 创建一个事件对象
event.type = "com.nullice.event.test"; //设定一个类型名称
event.scope = "APPLICATION";// 限定在宿主应用范围内
event.data = " good bye!"; // 事件要传递的信息
cs.dispatchEvent(event); // GO ! 发送事件

1.4.2.ExtendScript 端

在 ExtendScript 端，由于 ExtendScript 默认没有支持事件处理，需要手动载入一个库：new ExternalObject(“lib:\PlugPlugExternalObject”) ，载入后就可以通过创建 CSXSEvent() 对象来创建并发送事件了：

try {
    var loadSuccess = new ExternalObject("lib:\PlugPlugExternalObject"); //载入所需对象，loadSuccess 记录是否成功载入
} catch (e) {
    alert(e);// 如果载入失败，输出错误信息
}

if (loadSuccess) {
    var eventJAX = new CSXSEvent(); //创建事件对象
    eventJAX.type = "com.nullice.event.test2"; //设定一个类型名称
    eventJAX.data = " (⋟﹏⋞) !!!"; // 事件要传递的信息
    eventJAX.dispatch(); // GO ! 发送事件
}

上面这个示例中的事件都可以在 CEP JavaScript 中通过下面这个示例代码监听：

cs.addEventListener("com.nullice.event.test2",
    function (Event)
    {
        alert(Event.type +" : " + Event.data);
    }
);

1.5.ExtendScript 事件监听

在 PhotoShop 中创建、移动一个图层、复制、粘贴内容等操作产生的事件就属于 ExtendScript 事件，ExtendScript 事件与不同其他事件，不能简单通过事件的 type 来捕捉，而需要注册想要捕捉的事件后统一捕捉并处理。由于ExtendScript 事件的特殊性，在这里单独来讲。

1.5.1.ExtendScript eventID

每种 ExtendScript 事件有不同 eventID ,比如创建图层是 1298866208, 复制是 1668247673 ，在 ExtendScript 中有个方法 charIDToTypeID( ) 可以把事件名转换成 eventID ：

charIDToTypeID( “copy” ) // 返回 1668247673

1.5.2.注册想要监听的 ExtendScript 事件

监听 ExtendScript 事件得先发送一个com.adobe.PhotoshopRegisterEvent 类型的 CEP 事件，来告诉宿主你要监听的 ExtendScript 事件。这个 “注册事件” 的 .data 就填写你要监听的 ExtendScript 事件的 eventID ：

var cs= new CSInterface();
var event = new CSEvent("com.adobe.PhotoshopRegisterEvent", "APPLICATION");  //创建一个“注册事件”
event.extensionId = cs.getExtensionID(); //设置“注册事件” extensionId 为你扩展的扩展ID
event.data = "1298866208"; // 想要监听的 ExtendScript 事件 eventID , 这里是创建图层对象事件: "Mk  "=1298866208
cs.dispatchEvent(event); //发送“注册事件”，完成注册

1.5.3.开始监听事件绑定

注册完事件，就可以绑定方法了，通过 cs.addEventListener() ，监听一个 type 为 "com.adobe.PhotoshopJSONCallback + 你的扩展ID"的事件，就能接收到 ExtendScript 事件了：

var cs= new CSInterface();
cs.addEventListener("com.adobe.PhotoshopJSONCallback" + cs.getExtensionID(), PSCallback);

可以看到，所有 ExtendScript 事件都通过这个 "com.adobe.PhotoshopJSONCallback + 你的扩展ID"的 CEP 事件来接收，ExtendScript 事件对象 JSON 化的字符串被放在 “com.adobe.PhotoshopJSONCallback + 你的扩展ID” 的 .data 中下面是上面示例代码中接收的事件的 .data（为了展示已经格式化，原本没有换行）：

ver1, {
    "eventID": 1298866208, "eventData": {
        "layerID": 16, "null": {"_ref": "contentLayer"}, "using": {
            "_obj": "contentLayer", "shape": {
                "_obj": "customShape", "bottom": {"_unit": "distanceUnit", "_value": 73.9907},
                "left": {"_unit": "distanceUnit", "_value": 54.9931}, "name": "箭头 5",
                "right": {"_unit": "distanceUnit", "_value": 107.986},
                "top": {"_unit": "distanceUnit", "_value": 34.9956}
            }, "strokeStyle": {
                "_obj": "strokeStyle", "fillEnabled": true, "strokeEnabled": false,
                "strokeStyleBlendMode": {"_enum": "blendMode", "_value": "normal"},
                "strokeStyleContent": {"_obj": "solidColorLayer", "color": {"_obj": "grayscale", "gray": 0}},
                "strokeStyleLineAlignment": {"_enum": "strokeStyleLineAlignment", "_value": "strokeStyleAlignInside"},
                "strokeStyleLineCapType": {"_enum": "strokeStyleLineCapType", "_value": "strokeStyleButtCap"},
                "strokeStyleLineDashOffset": {"_unit": "pointsUnit", "_value": 0}, "strokeStyleLineDashSet": [],
                "strokeStyleLineJoinType": {"_enum": "strokeStyleLineJoinType", "_value": "strokeStyleMiterJoin"},
                "strokeStyleLineWidth": {"_unit": "pointsUnit", "_value": 4}, "strokeStyleMiterLimit": 100,
                "strokeStyleOpacity": {"_unit": "percentUnit", "_value": 100}, "strokeStyleResolution": 72.009,
                "strokeStyleScaleLock": false, "strokeStyleStrokeAdjust": false, "strokeStyleVersion": 2
            }, "type": {"_obj": "solidColorLayer", "color": {"_obj": "grayscale", "gray": 33.8823}}
        }
    }
}

1.5.4.取消监听

要取消一个 ExtendScript 事件的监听，就是要取消其注册。与注册基本一样，只是这次发送的是 com.adobe.PhotoshopUnRegisterEvent 类型的消息：

var cs= new CSInterface();
var event = new CSEvent("com.adobe.PhotoshopUnRegisterEvent", "APPLICATION");  //创建一个“取消注册事件”
event.extensionId = cs.getExtensionID(); //设置“取消注册事件” extensionId 为你扩展的扩展ID
event.data = "1298866208"; // 要取消注册事件的 id
cs.dispatchEvent(event); //发送“取消注册事件”，取消注册

2.执行 ExtendScript 代码

在 CEP 的 JavaScript 中用 CSInterface 的 evalScript()方法就可以执行 ExtendScript 代码：

var cs = new CSInterface();
cs.evalScript("app.documents.add();")

2.1.异步

evalScript(script, callback)方法接受 2 个参数，第一个是要执行的 ExtendScript 代码，第二个是接受执行返回值的回调函数。值得注意的是执行 ExtendScript 后的返回值只能通过回调函数获取，而这是一个异步过程，所以像下面这样的代码得到的结果可能和你想象的不同：

var cs = new CSInterface();
var layerName = "缺省"
cs.evalScript("app.documents[0].layers[0].name;", function(result)
{
    layerName = result; // 设置 layerName 为第一个图层的图层名；
})
alert(layerName ); // 返回： "缺省"

由于回调函数是异步的，运行到 cs.evalScript()这行时并不会等待执行完 ExtendScript 代码，而是会继续运行下面的代码（也就是 alert(layerName );），所以这时 layerName依旧是 "缺省"而不是一般预想的执行ExtendScript 得到的图层名。真正执行回调函数得等到所有代码运行完毕之后了。要简单的使用异步机制，这里推荐使用 Promise 的方法，具体可以参考 《JavaScript Promise 迷你书》。不过如果代码简单的话，直接把所有的代码都写到回调中也是可以的。

2.2.执行 JSX 文件中的代码

ExtendScript 脚本保存的文件即是 JSX 文件。当 ExtendScript 代码很多很复杂的时候，还用 evalScript() 执行就很不明智了，这时候就应该把 ExtendScript 代码单独保存为 JSX 文件。在 manifest.xml 文件中的 中可以定义一个 JSX 文件，这个文件会在扩展启动时被载入：

./jsx/Source1.jsx

我们通常把 ExtendScript 代码都写到这个文件中，再在 CEP JavaScript 中使用 evalScript() 调用： Source1.jsx

var dodo = function (info)
{
    alert("dodo:" + info);
}

test.js

var cs = new CSInterface();
var message= "来自 CEP 插件 ：" + cs.getExtensionID();
cs.evalScript("dodo('"+message +"');")// 调用 Source1.jsx  中的 dodo() 函数

2.3.动态载入 JSX 文件

除了在 manifest.xml 指定的 JSX 文件，我们还可以动态的载入 JSX 文件，这样我们就可以根据需求载入多个 JSX 文件： 注意这是在 CEP JavaScript 中而非 JSX 中

function loadJSX(fileName)
{
    var extensionRoot = cs.getSystemPath(SystemPath.EXTENSION) + "/jsx/";// 这里是指插件目录下的 jsx 文件夹，可自行设为任意目录
    cs.evalScript('$.evalFile("' + extensionRoot + fileName + '")');
}
loadJSX("oo.jsx");// 载入插件目录下 jsx\oo.jsx 文件

2.4.通过 JSON 传递对象

从 ExtendScript 向 CEP JavaScript 传递对象除了使用事件，也可以使用 evalScript()的回调还实现，同样也是先在 ExtendScript 中把对象转换成 JSON 字符串，在返回字符串，最后在 CEP JavaScript 中把字符串还原成对象。 不过要注意的是 ExtendScript 并不预置 JSON 对象，需要自己载入。你需要下载 json2.js 并放在你的你的插件目录中，并用上面动态载入 JSX 文件的方法载入它。

下面是一个读取 Photoshop 中所有字体信息并发送到 CEP JavaScript 中的例子： Source1.jsx

function getFontsJson()
{
    var fontlist = new Object(); // 创建一个要传递的对象

    //----这个例子是获得 PhotoShop 的可用字体列表
    fontlist.length = app.fonts.length;
    fontlist.list = [{}];
    for (var i=0; i