krkr进阶教程5

 

GraphicLayer

该教程为水螅制作，未经允许，请勿转载

打开GraphicLayer.tjs，首先是一个class ProvinceContext，这东西里边除了定义了几个名字外其他啥都没有……这东西就是用来把解析出来的领域画像脚本弄成一个类方便调用的……没啥可说的……

再往下是class GraphicLayer extends AnimationLayer，继承了AnimationLayer的GraphicLayer的类的定义。

一行一行往下看，可以看到graphiclayer重定义了loadimages，当然super还有有的，但是在super下边加了这么几行

if(elm !== void)
   {
    if(elm.mapimage !== void) super.loadProvinceImage(elm.mapimage); // 領域画像を読む
    if(elm.mapaction !== void)
    {
     internalLoadProvinceActions(elm.mapaction); // 領域アクションを読む
    }
    else
    {
     var name;
     var storage = Storages.getPlacedPath(
      name = (Storages.chopStorageExt(elm.storage) + ".ma")); // 拡張子が .ma のファイル
     if(storage != '')
      loadProvinceActions(name);
    }
   }

对领域画像的读取，不知道领域画像是啥的人请重温kag3doc……

也就是说kag里用的那种"文件名.ma”的领域画像脚本的载入解析是在graphiclayer及其子类才有的，之前的类是没有的……之前的类要载入需要单独调用loadProvinceImage函数，而且还没有脚本载入指令的样子（嗯，我也不知道loadProvinceImage单独用起来有什么意义远目……），总之需要用到这东西的人在new的时候要注意这个……

虽然其实我从来不用领域画像……对于我来说button更方便效果也更好看……（死）

 

再往下全部function基本上都是为领域画像服务的，可以说graphiclayer就是专门为领域画像改造的一个类，像是assign什么的，就是除了继承父类的assign外还进行了领域画像部分的复制，变成了graphiclayer的assign除了复制画面外还复制领域画像的内容……

所以其他部分我就不解释了……有兴趣的人慢慢看吧……（就算不看其实也没啥……）。

于是接下来看下边的class BaseLayer extends GraphicLayer……

构造函数里有这么两句

hitType = htMask;
   hitThreshold = 0;

这个东西就是设置图层透过用的，hitType = htMask是透过模式，有好几种，具体请查指令集，这种的意思就是根据画面透明度来决定透过，所以下边那个hitThreshold = 0就是只要画面上的像素点透明度>=0就不透过，不透过的意思就是当鼠标移动到那个位置的时候图层被focus，此时图层可以响应鼠标动作（想不通的同学请想想鼠标移动到按钮上的样子就明白了……按钮会变化就是因为那个层被focus并响应了鼠标的onmouseenter动作……）

同时呢，假如我有两个图层，都是hitThreshold = 0就是全部不透过，我把图层1放在图层2上边，这样当鼠标移动到图层1和图层2重叠的位置时，因为图层1遮住了图层2，所以此时focus的就是图层1，也就是只会发生图层1的鼠标事件，直到鼠标被移动到没有图层1遮蔽住的图层2位置，图层2才会被focus，才能触发他的事件……

不要嫌我罗嗦……之所以我要这么啰啰嗦嗦的说一件看起来显而易见的事情是因为……曾经有人new了两个层，在下边那个层上写了鼠标事件……在上边那个完全透明的层上写了全部不透过……然后来问我为什么他的鼠标事件就是不执行呀不执行……

所以这个我一定要提一下……遇到这种情况请务必检查自己focus的状态口牙……

再往下看有一个function值得一说，就是atEndOfTransition，这个function是在kaglayer里第一次定义的，而调用了他的是kaglayer的onTransitionCompleted，onTransitionCompleted是layer类的一个函数，当layer被trans完成时自动执行这个函数，kaglayer里atEndOfTransition是空的，到了baselayer才真正开始有了内容。就是如果源不为空的话调用这么几句

super.assign(src);
    exchangeInfo();
    window.swapCharacterLayer(id);

最下边那个window指的就是kag，swapCharacterLayer是什么到mainwindow里就能找到了。

基本上trans之后就是交换两个层的信息。在tjs里边，trans其实是针对一个层的，也就是说层并不是像kag里那样成双成对的出现的，建立了一个层之后，trans他就会不可见，再trans他就会再次出来。而kag把两个层这样搭对了一下，变成了trans时fore层不可见back层出现，此时就在onTransitionCompleted里边交换两个层的信息，把可见的那个实体赋值给fore，把不可见的那个实体赋值给back，再trans的话还是这样。所以back就一直不可见……

总而言之这就是kag的trans的机理……

再往下值得一提的还有这个函数

function onMouseDown(x, y, button)
{
   // マウスが押された
   super.onMouseDown(...);
   internalOnMouseDown(x, y, button);
}

onMouseDown是layer类的函数，当该layer层被focus时，按下鼠标就会执行这个函数……还有onkeydown、onmouseleave、onmouseenter等等……鼠标和键盘操作全部都是基于layer类的，所以说layer类的掌握很重要口牙很重要……

这个function就是直接调用了另一个function internalOnMouseDown

function internalOnMouseDown(x, y, button, processprovince = true)
{
   // 内部関数
   var provinceprocessed = false;
   if(button == mbLeft && processprovince && !window.messageLayerHiding)
    provinceprocessed = processProvince(x, y);
   if(button == mbLeft && !provinceprocessed)
   {
    // 自身がプライマリレイヤならば、ウィンドウの
    // onPrimaryClick を呼ぶ
    if(isPrimary) window.onPrimaryClick();
   }
   else if(button == mbRight)
   {
    // 自身がプライマリレイヤならば、ウィンドウの
    // onPrimaryRightClick を呼ぶ
    if(isPrimary) window.onPrimaryRightClick();
   }
}

基本内容就是如果按左键就调用window.onPrimaryClick()，如果按右键就调用window.onPrimaryRightClick()……以及其他（其他是什么啊喂喂）

除了baselayer类外，在下边的StageLayer类，CharacterLayer类也都是这样的（messagelayer没有这个是因为messagelayer在文字显示区域全局透过……），当然这些类们具体function还有一些if上其他功能的区别

而我们平时用kag的时候，画面上显示的也就是这些类，所以不管怎么点都是最后调用了kag的onPrimaryClick()或者onPrimaryRightClick()……也就是说……想要修改鼠标点击后执行的内容，可以直接去改mainwindow里的这两个函数……但是，自己new的层，用的不是这几个类的话，就当然不会执行这两个函数了……

于是这个文件就讲到这里……stagelayer和characterlayer没什么特别好说的，都看到这里了还看不懂那些的话可能性也不大……|||||||||||

接下来大概会去讲messagelayer那些吧……当然也有可能就这么坑掉……（默默地远目……）



TOP

访客数： 3169943
aa