qjkankan_v1.1.1/packages/qjkankan-editor/public/static/template/customTooltip.xml

<krpano>
    <!-- 1.20. 新热点模式 -->
    <action name="addJQHotspot">
        showlog();
        set(hsp_name,%1); 
        set(hsp_type,%2); 
        txtadd(iconUrl,'',%4);
        txtreplace(iconUrl,'|',',');

        if(%2 LE 1,
                     <!-- trace('id==',get(hsp_name),"::",get(iconUrl)); -->
             set(hotspot[get(hsp_name)].type,'image');
             set(hotspot[get(hsp_name)].url,get(iconUrl));
         );
        ifnot(%2 LE 1, set(hotspot[get(hsp_name)].type, 'text'));

                <!-- 其他标签 （0，1，2）-->
        if(%2 LE 2,
         set(hotspot[get(hsp_name)].height,%8);
         set(hotspot[get(hsp_name)].width,'prop');
         txtadd(hotspot[get(hsp_name)].onloaded,"add_tooltip_label();");
         );

  
        set(hotspot[get(hsp_name)].name,%1);
        set(hotspot[get(hsp_name)].hotspottype,%2);
        set(hotspot[get(hsp_name)].hotspottitle,%3);
        set(hotspot[get(hsp_name)].hotspotStyle,%10);

        set(hotspot[get(hsp_name)].ath,%5);
        set(hotspot[get(hsp_name)].atv,%6);

        set(hotspot[get(hsp_name)].visible,true);
        set(hotspot[get(hsp_name)].alpha,1);
        set(hotspot[get(hsp_name)].scale,1);
        set(hotspot[get(hsp_name)].autoalpha,false);
        set(hotspot[get(hsp_name)].distorted,false);
        set(hotspot[get(hsp_name)].onclick,'js(__krfn.utils.linkopen(%7,%1));');
        set(hotspot[get(hsp_name)].ondown,dragJQhotspot(););
        set(hotspot[get(hsp_name)].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(name),get(ath),get(atv))));

         txtsplit(%10,'|',fontSize,pos,isHover,borderColor,fillColor,textColor,isShowLine,isTextWrap,lineDirection,textDirection,textNumPerLine,duration,frameNumber);
     
   
                <!-- 个性化标签（3） -->
        if(%2 == 3,    
            set(hotspot[get(hsp_name)].height,80);
            set(hotspot[get(hsp_name)].width,1);
            set(hotspot[get(hsp_name)].padding,0);
            set(hotspot[get(hsp_name)].background,false);
            txtadd(line,'        <div style="background-color: ',get(borderColor),';width:1px;height:80px;"></div>');
            trace('tags::',tagStyle);
            copy(hotspot[get(hsp_name)].html,line);
            txtadd(hotspot[get(hsp_name)].onloaded,"add_tooltip_label();add_tooltip_dot();");
            if(
                lineDirection == 'right-top',
                set(hotspot[get(hsp_name)].rotate,35);
            );
            if(
                lineDirection == 'right-center',
                set(hotspot[get(hsp_name)].rotate,90);
            );
            if(
                lineDirection == 'right-bottom',
                set(hotspot[get(hsp_name)].rotate,-35);
            );
            if(
                lineDirection == 'left-top',
                set(hotspot[get(hsp_name)].rotate,-35);
            );
            if(
                lineDirection == 'left-center',
                set(hotspot[get(hsp_name)].rotate,90);
            );
            if(
                lineDirection == 'left-bottom',
                set(hotspot[get(hsp_name)].rotate,35);
            );
        );

        addhotspot(get(hsp_name));
    </action>


    <action name="add_tooltip_label">
        txtadd(tooltipname, 'tooltip_', get(name)); 
        txtsplit(hotspotStyle,'|',fontSize,pos,isHover,borderColor,fillColor,textColor,isShowLine,isTextWrap,lineDirection,textDirection,textNumPerLine,duration,frameNumber);

        addlayer(get(tooltipname));
        txtadd(layer[get(tooltipname)].parent, 'hotspot[', get(name), ']');
        set(layer[get(tooltipname)].autowidth, true);
        set(layer[get(tooltipname)].width,'prop');
        set(layer[get(tooltipname)].height,30); 
        set(layer[get(tooltipname)].edge,center);
        set(layer[get(tooltipname)].background,false);
        set(layer[get(tooltipname)].pos,pos);
        set(layer[get(tooltipname)].padding,0);
        set(layer[get(tooltipname)].type,'html');
        set(layer[get(tooltipname)].url,'%SWFPATH%/plugins/textfield.swf');
        set(layer[get(tooltipname)].border,false);
        set(layer[get(tooltipname)].align,center);
  
        set(layer[get(tooltipname)].ondown,'dragJQlayer();');
        set(layer[get(tooltipname)].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(hsName),get(ath),get(atv))));
                <!-- set(hotspot[get(hsp_name)].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(name),get(ath),get(atv)))); -->
        txtadd(labelCode, '<div style="display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid ',get(borderColor),'; padding: 6px 10px; white-space: pre; border-radius: 5px; background: ',get(fillColor),'">','            <div style="text-align: left; font-size:',get(fontSize),'px; color: ',get(textColor),'; line-height: 1.4;">',get(hotspottitle),'</div>
        </div>'); 
        
        <!-- label方位 -->
        if(get(hotspottype) LE 2,
        trace('hotspottype::',get(hotspottype),'::tooltipname::',get(tooltipname),'pos::',get(pos));
        set_label_pos(get(tooltipname),get(pos));
       );

                <!-- 个性化标签（3） -->
        if(get(hotspottype) == 3,    
            trace('lineDirection2::',lineDirection); 
                    <!-- txtadd(labelCode, '<div style="display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid ',get(borderColor),'; padding: 6px 10px; white-space: pre; border-radius: 5px; background: ',get(fillColor),'">','<div style="text-align: left; font-size:',get(fontSize),'px; color: ',get(textColor),'; line-height: 1.4;">',get(hotspottitle),'</div></div>');  -->
            if(
                lineDirection == 'right-top',
                set(layer[get(tooltipname)].y,-60);
                set(layer[get(tooltipname)].rotate,-35);
             );
            if(
                lineDirection == 'right-center',
                set(layer[get(tooltipname)].x,0);
                set(layer[get(tooltipname)].y,-80);
                set(layer[get(tooltipname)].rotate,-90);
            );
            if(
                lineDirection == 'right-bottom',
                set(layer[get(tooltipname)].y,60);
                set(layer[get(tooltipname)].rotate,35);
            );
             if(
                lineDirection == 'center-top',
                set(layer[get(tooltipname)].y,-55);        
             );
             if(
                lineDirection == 'center-bottom',
                set(layer[get(tooltipname)].y,55);
             );
            if(
                lineDirection == 'left-top',
                set(layer[get(tooltipname)].y,-60);
                set(layer[get(tooltipname)].rotate,35);
             );
            if(
                lineDirection == 'left-center',
                set(layer[get(tooltipname)].x,0);
                set(layer[get(tooltipname)].y,80);
                set(layer[get(tooltipname)].rotate,-90);
             );
            if(
                lineDirection == 'left-bottom',
                set(layer[get(tooltipname)].x,0);
                set(layer[get(tooltipname)].y,60);
                set(layer[get(tooltipname)].rotate,-35);
             );

        );
        copy(layer[get(tooltipname)].html, labelCode);
            
    </action>
    <!-- <style name="tooltip_dot_bg" type="container" border-radius="50%" bgcolor="0xFFFFFF" bgalpha="0.9" height="20" width="20" keep="true" /> -->
    <action name='add_tooltip_dot'>
        txtadd(tooldot, 'tooldot_', get(name)); 
        trace('hey::',get(borderColor));
        addlayer(get(tooldot));
        txtadd(layer[get(tooldot)].parent, 'hotspot[', get(name), ']');
        set(layer[get(tooldot)].width,10); 
        set(layer[get(tooldot)].height,10); 
        set(layer[get(tooldot)].padding,0); 
       
        set(layer[get(tooldot)].align,center);
        set(layer[get(tooldot)].type,'text');
        set(layer[get(tooldot)].background,false);
        txtadd(dborderColor,'rgba(255,255,255,0.5)');
        txtadd(line,'<div style="background-color: ',get(borderColor),';width:10px;height:10px;"></div>');
        copy(layer[get(tooldot)].html,line);
        set(layer[get(tooldot)].backgroundcolor,get(borderColor)); 
        set(layer[get(tooldot)].backgroundalpha,0.9); 
        set(layer[get(tooldot)].bgroundedge,5);

        set(layer[get(tooldot)].ondown,'dragJQlayer();');
        set(layer[get(tooldot)].onup,js(__krfn.angle.updateHotSpotData(get(xml.scene),get(hsName),get(ath),get(atv))));

                <!-- 个性化标签（3） -->
        if(get(hotspottype) == 3,    
            trace('lineDirection3::',lineDirection); 
            if(
                lineDirection == 'right-top',
                set(layer[get(tooldot)].x,0);
                set(layer[get(tooldot)].y,40);
             );
            if(
                lineDirection == 'right-center',
                set(layer[get(tooldot)].x,0);
                set(layer[get(tooldot)].y,40);
            );
             if(
                lineDirection == 'right-bottom',
                set(layer[get(tooldot)].x,0);
                set(layer[get(tooldot)].y,-40);
            );
             if(
                lineDirection == 'center-top',
                 set(layer[get(tooldot)].x,0);
                 set(layer[get(tooldot)].y,40);
             );
             if(
                lineDirection == 'center-bottom',
                 set(layer[get(tooldot)].x,0);
                 set(layer[get(tooldot)].y,-40);
             );
             if(
                lineDirection == 'left-top',
                 set(layer[get(tooldot)].x,0);
                 set(layer[get(tooldot)].y,40);
             );
             if(
                lineDirection == 'left-center',
                 set(layer[get(tooldot)].x,0);
                 set(layer[get(tooldot)].y,-40);
             );
             if(
                lineDirection == 'left-bottom',
                 set(layer[get(tooldot)].x,0);
                 set(layer[get(tooldot)].y,-40);
             );
        );

    </action>

    <action name='set_label_pos'>
        <!-- label方位 -->
       set(posName,%1);
       set(pos,%2);    
        if(
            pos == 'top',
            trace('height::',get(layer[get(posName)].height));
            add(dHeight,get(layer[get(posName)].height), 12);
            mul(dHeight, -1);
            set(layer[get(posName)].x,0);
            set(layer[get(posName)].y,get(dHeight));
        );
         if(
            pos == 'bottom',
            trace('height',get(layer[get(posName)].height));
            add(dHeight,get(layer[get(posName)].height), 12);
            mul(dHeight, 1);
            set(layer[get(posName)].x,0);
            set(layer[get(posName)].y,get(dHeight));
        );
        if(
            pos == 'left',
            delayedcall(0.3,delaySetLabelHoraLeft(get(posName)));
        );
        if(
            pos == 'right',
            delayedcall(0.3,delaySetLabelHoraRight(get(posName)));
        );
    </action>

    <action name="delaySetLabelHoraLeft">     
        ifnot(isvalue(name),
            trace('notName1',);
            set(name,%1);
            txtreplace(name, 'tooltip_', ''); 
        );
        def(dWidth,number);
        txtadd(tooltipname, 'tooltip_', get(name)); 
        txtadd(jsCode,"document.getElementById('krpanoSWFObject').get('layer[",get(tooltipname),"]').pixelwidth");
        jsget(dWidth,get(jsCode));
        trace('tooltipname::',get(tooltipname),'dWidth::',dWidth);
        mul(dWidth, -1);
        set(layer[get(tooltipname)].y,0);
        set(layer[get(tooltipname)].x,get(dWidth)); 
    </action>
    <action name="delaySetLabelHoraRight"> 
        <!-- 解决单传时 -->
        ifnot(isvalue(name),
            trace('notName1',);
            set(name,%1);
            txtreplace(name, 'tooltip_', ''); 
        );
        def(dWidth,number);
        txtadd(tooltipname, 'tooltip_', get(name)); 
        txtadd(jsCode,"document.getElementById('krpanoSWFObject').get('layer[",get(tooltipname),"]').pixelwidth");
        jsget(dWidth,get(jsCode));
        trace('tooltipname::',get(tooltipname),'dWidth::',dWidth);
        mul(dWidth, 1);
        set(layer[get(tooltipname)].y,0);
        set(layer[get(tooltipname)].x,get(dWidth)); 
    </action>
    <action name="removeJQHotspot">
        set(delHotspot,%1);
        removehotspot(%1,true);
        txtadd(delHotspotLabel,'tooltip_',get(delHotspot));
        txtadd(delHotspotdot,'tooldot_',get(delHotspot));
        removelayer(get(delHotspotLabel));
        removelayer(get(delHotspotdot));
    </action>

    <!-- 编辑热点 -->
    <action name="editJQHotspot">
      showlog();
      trace('editJQHotspot',%2);
      set(hsp_name,%1); 
      set(hsp_type,%2); 
      txtadd(hsLabel, 'tooltip_', %1); 
      txtadd(hsDot, 'tooldot_', %2); 
      set(hotspot[get(hsp_name)].hotspottitle,%3);
      set(hotspot[get(hsp_name)].hotspotStyle,%10);
      txtsplit(%10,'|',fontSize,pos,isHover,borderColor,fillColor,textColor,isShowLine,isTextWrap,lineDirection,textDirection,textNumPerLine,duration,frameNumber);
      txtadd(labelCode, '<div style="display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid ',get(borderColor) ,'; padding: 6px 10px; white-space: pre; border-radius: 5px; background: ',get(fillColor),'">','        <div style="text-align: left; font-size:',get(fontSize),'px; color: ',get(textColor),'; line-height: 1.4;">',%3,'</div></div>');     
      copy(layer[get(hsLabel)].html, labelCode);

      if(%2 LE 2,
        set(hotspot[get(hsp_name)].height,%8);
        set(hotspot[get(hsp_name)].width,'prop');
        set_label_pos(get(hsLabel),get(pos));
       );
      if(%2 == 3,
       trace('edit3');
      );

</action>

<action name="dragJQlayer"> 
       txtadd(hsName, '', get(name)); 
       txtreplace(hsName, 'tooltip_', ''); 
       txtreplace(hsName, 'tooldot_', ''); 

    <!-- copy(drag_currentx, x);
        copy(drag_currenty, y);
        copy(drag_stagex, mouse.stagex); 
        copy(drag_stagey, mouse.stagey);
        indexoftxt(align_contains_right, get(align), 'right');
        indexoftxt(align_contains_bottom, get(align), 'bottom'); 
        calc(drag_align_x, align_contains_right GE 0 ? -1 : +1);
        calc(drag_align_y, align_contains_bottom GE 0 ? -1 : +1);    
        -->
        
        copy(hath, hotspot[get(hsName)].ath);
        copy(hatv, hotspot[get(hsName)].atv);
        spheretoscreen(hath, hatv, hotspotcenterx, hotspotcentery, 'l');
        sub(drag_adjustx,mouse.stagex, hotspotcenterx);
        sub(drag_adjusty,mouse.stagey, hotspotcentery); 
    
        asyncloop(
            <!-- 计算热点中心点 -->
            pressed,
            sub(dx, mouse.stagex, drag_adjustx);
            sub(dy, mouse.stagey, drag_adjusty);
            screentosphere(dx, dy, ath, atv); 
            <!-- 更新 -->
            copy(hotspot[get(hsName)].ath, ath);
            copy(hotspot[get(hsName)].atv, atv);,
            set(global.ath,get(ath));
            set(global.atv,get(atv));
        );   

</action>

<action name="dragJQhotspot">
        trace('dragJQhotspot::',ath,atv);

        spheretoscreen(ath, atv, hotspotcenterx, hotspotcentery, 'l');
        sub(drag_adjustx,mouse.stagex, hotspotcenterx);
        sub(drag_adjusty,mouse.stagey, hotspotcentery); 
    
        asyncloop(
            pressed, 
            sub(dx, mouse.stagex, drag_adjustx);
            sub(dy, mouse.stagey, drag_adjusty);
            screentosphere(dx, dy, ath, atv);,
            trace('last-ath1::',get(ath),'last-atv::',get(atv));
        );
</action>
</krpano>