1. 程式人生 > >KRPano動態熱點專用素材圖50多個,加動態熱點使用方法

KRPano動態熱點專用素材圖50多個,加動態熱點使用方法

arc name blog math del 感覺 動態 div 動態圖

KRPano動態熱點專用素材是一種特定形式的序列圖,該序列圖要求幀的水平和垂直的具體位置必須準確,否則圖的動作將會出現錯亂,KRPano不支持動態圖。目前網上比較匱乏動態熱點素材,在此親手整理制作了50多個熱點素材圖。

技術分享圖片

使用的時候請用橫著或者豎著的長圖,這個就是動態熱點素材圖,其它的圖我們直接看到圖像內容的是給大家預覽的,好知道是什麽熱點素材圖,KRPano會自動識別這種素材圖,播放順序從左到右、從上到下。

每張熱點素材圖,都是親手拆解動態圖、組合序列圖等流程完成整理制作的,光是動態圖網上就很不好找的,並不是什麽動態圖都可以拿來拆解後搞成專用熱點素材的,幀太多等都不行。每張圖都敲了一下計算器給大家算好了使用時的尺寸,也就是比如說 120這種圖是“120_200x200.png”那麽200x200就是大家使用時的寬和高,這是原尺寸,如果不滿意,或者感覺小,可以自行在KRPano中按長寬等比例把寬和高值寫大一些。

下面以pr10版本為例

在主xml文件也就是tour.xml文件空白處的scene標簽外面,放入以下代碼。

<action name="do_crop_animation">
    <!-- 為熱點註冊屬性 -->
    registerattribute(xframes, calc((imagewidth / %1) BOR 0));
    registerattribute(yframes, calc((imageheight / %2) BOR 0));
    registerattribute(frames, calc(xframes * yframes));
    registerattribute(frame, 0);
 
    set(crop, ‘0|0|%1|%2‘);
 
    setinterval(calc(‘crop_anim_‘ + name), calc(1.0 / %3),
        if(loaded,
            inc(frame);
            if(frame GE frames, if(onlastframe !== null, onlastframe() ); set(frame,0); );
            mod(xpos, frame, xframes);
            div(ypos, frame, xframes);
            Math.floor(ypos);
            mul(xpos, %1);
            mul(ypos, %2);
            calc(crop, xpos + ‘|‘ + ypos + ‘|%1|%2‘);
          ,
            clearinterval(calc(‘crop_anim_‘ + name));
          );
      );
</action>

在hotspot標簽或layer中加入以下代碼即可。test.png是所使用的動態熱點素材圖,不寫子路徑的話,就是在漫遊工程項目的根目錄。100,100, 60分別代表熱點素材圖的寬、高、速度。

url="test.png"  onloaded="do_crop_animation(100,100, 60)"

KRPano專用熱點素材圖下載

https://pan.baidu.com/s/1c2JGWX6

本博文發表於:http://www.krpano.tech/archives/775

發布者:聶雲風情

轉載請註明出處,謝謝!

KRPano動態熱點專用素材圖50多個,加動態熱點使用方法