TagCanvas文字雲屬性+方法彙總
- 前言
- 導入
- 使用
- 可用屬性
- js方法
- jq方法
前言
甲方爸爸要一個文字旋轉的炫酷功能,無意間發現了這個插件,用起來還可以就是感覺擴充性不強,由于網上的資料太少,是以做個記錄
導入
這裡是官方的導傳入連結接
https://www.goat1000.com/tagcanvas.php#links
使用
js代碼
//在加載canvas之前,可以先調整一下畫布的大小,其中:
//canvas.width屬性決定了雲圖實際的大小,canvas.style.width決定了雲圖顯示的大小,height同理(沒有了解的可以直接試試修改這兩個值)
var myCanvas = document.getElementById("canvas")
myCanvas.width=document.body.clientWidth
myCanvas.height=document.body.clientHeight
var options = {}//options裡面放的是屬性,會在下面寫到
TagCanvas.Start(canvas,tags,options);//js
//$(selector).tagcanvas(options,tagListId);//jq
html代碼
<canvas id="canvas" style="background: #000000;"></canvas>
<div id="tags" style="display: none;">
<a href="#">helloWord</a><!-- 插入文字的用法 -->
<a href="#">
<img src="xxx"/><!-- 插入圖檔的用法 -->
</a>
</div>
TagCanvas.Start方法會将tags裡的a标簽放到畫布裡(其它标簽貌似不起作用),是以将想要的标簽寫入tags中即可,這裡也可以用js的appendChild添加,也可以innerHTML添加,添加後執行TagCanvas.Start方法
可用屬性
放在options對象裡,逗号隔開
var options={
//dragControl:false,//滑鼠控制,true則滑鼠點選可以拖動,不點選沒效果,false則根據滑鼠位置旋轉
//initial:[-0.2, 0],//初始旋轉,水準和垂直為數組,這個是滑鼠未進行操控時的旋轉
//freezeActive :true,//設定為true以在突出顯示标記時暫停移動。這個必須是在dragControl:false才有效
//maxSpeed: 0.05,//最大旋轉速度,設定小一點,轉的慢一點
//decel: 0.95,//滑鼠離開畫布時的減速率,設定0,滑鼠離開就停止,設定1,滑鼠離開還一直轉
//frontSelect:true,//設定為true以防止在雲後面選擇标記。
//minSpeed:0.0,//滑鼠離開畫布時的最小旋轉速度
//interval:20,//動畫幀之間的間隔,以毫秒為機關,這個東西設定大了速度會變快,但是會卡,基本20是最好的
//minBrightness:0.1,//最遠點的标簽亮度(0.0-1.0)
//textColour: '#fff',//标記文本的顔色,文字顔色和大小是沒法用style控制的,得在這裡寫
//textHeight:15,//标記文本字型的大小(以像素為機關)
//depth:1,//控制透視圖(0.0-1.0),you can try 一 try,1以内好像都沒啥用,建議試試2和3
//txtOpt:true,//文本優化,将文本标簽轉換為圖像以獲得更好的性能。
//reverse:true,//設定為true以反轉相對于滑鼠位置的移動方向。這個還是true好呀,false滑鼠都追不上标簽
//wheelZoom:false,//使用滑鼠滾輪或滾動手勢可以放大和縮小雲。
//shape:'Sphere',//目前支援的是Sphere,hcylinder 或vcylinder 三種形狀顯示,分别是圓形,立着的卷發棒,躺着的卷發棒
//lock : 'x',//'x'隻能豎着轉,'y'隻能橫着轉,但是我設定了'x'沒用,隻有'y'有用
//outlineMethod: 'size',//滑鼠指到的元素變化類型, /outline:顯示邊框線(有深度),classic:顯示邊框線,block:改變背景顔色為邊框線顔色,colour:改變顔色,顔色屬性為outlineColour:'#fff',size:改變文本大小,大小屬性為outlineIncrease:20,none:不突出顯示
//activeCursor:'pointer', //滑鼠懸停在标簽上時要使用的CSS光标類型,可選值auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ,太多了大家自行嘗試吧
//animTiming:'Smooth' ,//與RotateTag和TagToFront函數一起使用的動畫定時功能。可用的值為'Smooth' 和'Linear'.
//bgColour:'tag',//标簽的背景顔色,tag是标簽本身的背景顔色(即加在tags的标簽中的顔色)
//bgOutline:'tag',//标簽輪廓的背景顔色,tag是标簽本身的背景顔色(即加在tags的标簽中的顔色)
//outlineColour:'#fff',//活動标簽周圍的框的顔色,可選值tag:标簽的顔色,tagbg:标簽的背景顔色
//outlineThickness:2,//輪廓的粗細(以像素為機關)
//outlineOffset:5,//輪廓與文本的距離,以像素為機關
//bgRadius:5,//背景圓角的半徑(以像素為機關)。
//centreFunc:function (){},//中心繪圖函數,具體參考: https://www.goat1000.com/tagcanvas-centre.php
//centreImage:null,//在雲的中心繪制的圖像。使用内置的centreFunc回調函數在畫布中間以全尺寸繪制圖像。
//clickToFront:0,//如果設定為數字,則選中的标簽将在激活之前的這麼多毫秒内移到最前面。
//dragThreshold:4,//光标拖動這麼多像素雲才會移動
//fadeIn:1000,//标簽淡入的時間
//freezeDecel:false,//設定為true時freezeActive變成減速而不是暫停
//imageAlign:'centre',//水準圖像對齊,可選值centre,left,right。
//imageMode:null,//可選值null:有圖檔則圖檔,沒圖檔則文本,image:僅顯示圖檔,text:僅顯示文本,both:文本和圖像都使用該位置
//imagePadding:2,//使用imageMode“ both”時圖像和文本之間的距離。
//imagePosition:'left',//當使用imageMode“ both”時,圖像相對于文本的位置。可選值centre,left,right。
//imageRadius:0,//圖像角的半徑,以像素為機關。還支援使用必須包含在字元串中的百分比,例如'20%'。
//imageScale:1,//縮放圖像的數量-預設值1使用圖像在頁面上顯示的尺寸。如果不縮放(使用實際圖像尺寸),請将其設定為null。
//imageVAlign:'middle',//垂直圖像對齊方式,可選值middle,top,bottom
//maxBrightness:1.0,//雲前端标簽的亮度(不透明度)(0.0-1.0)。
//minTags:200,//最少标記數,如果少于這個就會重複tags的内容
//noMouse:false ,//設定為true防止任何滑鼠互動。該initial選項必須用于為雲設定動畫,否則它将一動不動。
//noSelect:false,// 設定為true防止選擇标簽。
//noTagsMessage:true,//當沒有可用标簽時,顯示“無标簽”而不是空白畫布。
//offsetX:0,//水準偏移雲的中心(以像素為機關)
//offsetY:0,//垂直偏移雲的中心(以像素為機關) 當沒有可用标簽時,顯示“無标簽”而不是空白畫布。
//padding:0,//文本周圍和背景内部的空間量。
//pinchZoom:false,//設定為true通過捏合觸摸屏裝置來啟用放大和縮小雲。
//outlineRadius:5,//輪廓框上的圓角半徑(以像素為機關)
//padding:0,//文本周圍和背景内部的空間量。
//pinchZoom:false,//設定為true通過捏合觸摸屏裝置來啟用放大和縮小雲。
//repeatTags:0,//在雲中重複标簽清單的次數。支援的最大值為64。此選項将覆寫該minTags選項。
//radiusX:1,//雲整體傾斜的角度和方向
//radiusY:1,//雲整體傾斜的角度和方向
//radiusZ:1,//雲整體傾斜的角度和方向
//scrollPause:0,//滾動頁面時的動畫延遲(以毫秒為機關)。适用于頁面上的所有TagCanvas執行個體。
//shuffleTags:false,//設定為true随機化标簽的順序。
//splitWidth:0,//如果大于0,則當該行長于該值時,将标簽在單詞邊界處分成多行。行在<br>标簽處自動斷開。
//stretchX:1,//水準拉伸或壓縮雲。
//stretchY:1,//垂直拉伸或壓縮雲。
//textAlign:'centre',//水準對齊文本,可選值centre,left,right。
//textVAlign:'middle',//垂直對齊文本,可選值middle,top,bottom
//這後面的我基本都沒用了,大家自行嘗試哈
// textFont :'Helvetica, Arial, sans-serif',//标簽文本的字型系列
// pulsateTo:1.0,//脈動輪廓不透明度(0.0 - 1.0),這兩個東西沒搞懂,設定後也沒啥變化
// pulsateTime:300,//脈搏率,以每秒的秒數為機關
// txtScale:2,//在txtOpt模式下轉換為圖像時文本的縮放系數。
// hideTags :false,//如果TagCanvas成功啟動,則設定為true以自動隐藏标記清單元素。
// zoom:1,//調整畫布中标簽雲的相對大小。較大的值将放大到雲,較小的值将縮小。跟depth差不多,不過這個看起來舒服點
// zoomStep:0.05,//每次移動滑鼠滾輪時縮放變焦量。
// zoomMax:3,//最大縮放值。
// zoomMin:0.3,//最小縮放值。
// shadow: '#fff',//每個标簽後面陰影的顔色。
// shadowBlur:100,//标記陰影模糊量,以像素為機關。
// shadowOffset: [5,0],//标記陰影的X和Y偏移量,以像素為機關。
// weight:false,//設定為true以打開标簽的權重。
// weightMode: 'size',//用于顯示标記權重的方法。應該是尺寸,顔色或兩者之一。
// weightSize:1,//用于在使用大小或兩者的重量模式時調整标簽大小的乘數。
// weightGradient:{0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'},//使用顔色權重模式或兩者時,用于着色标簽的顔色漸變。
// weightFrom:null,//用于擷取标記權重的link屬性。預設值為null表示權重取自計算出的連結字型大小。
// outlineDash:0,//行進螞蟻的大小用于輪廓/經典高光,0表示無破折号
// outlineDashSpace:0,//行進的破折号之間的距離大小,0等于 outlineDash
// outlineDashSpeed:1,//行進螞蟻動畫的速度,0表示不移動,負号表示反向
//tooltip[3]:null,//設定工具提示顯示方法：null無工具提示；native用于作業系統工具提示；div基于div的。
//tooltipClass[3]:'tctooltip',//工具提示div的類别。
//tooltipDelay[3]:300,//在顯示工具提示div之前滑鼠不移動時暫停的時間(以毫秒為機關)。
}
js方法
TagCanvas.Pause(‘canvas’);//暫停雲動畫
TagCanvas.Resume(‘canvas’);//暫停後恢複雲動畫
//重新加載功能從同一來源重新讀取标簽清單,替換目前清單。它的工作方式與再次調用Start相似,但是不會運作所有初始化代碼。
TagCanvas.Reload(‘canvas’);
//更新功能還會重新加載标簽清單,但會将未更改的标簽保持在(或接近)其目前位置。通過比較标記和href屬性的文本内容(或圖像源)來工作。标簽權重和标題會更新,而不會更改标簽位置。
TagCanvas.Update(‘canvas’);
//簡單來說,就是制定一個标簽,把他轉到最前面
TagCanvas.TagToFront(canvasId,{ id：“ tag1” });
這個方法對象有多個參數:
| 選項 | 預設 | 描述 |
|---|---|---|
| id | null | 該Id的标簽移到最前面 |
| index | null | 該數組索引的标簽移到最前面 |
| text | null | 該文字内容的标簽移到最前面 |
| time | 500 | 移動持續時間(以毫秒為機關) |
| callback | null | 移動完成後調用的功能 |
| active | false | 如果為true,則在運動時突出顯示标簽 |
TagToFront始終将所選标簽移動到雲的前端-如果要将标簽放置在其他位置,則必須使用RotateTag函數。其中lat和lng是坐标,其他參數見上表
TagCanvas.RotateTag(canvasId,{ id：“ tag1”,lat：30,lng：-45 });
啟動後設定雲的速度和方向
TagCanvas.SetSpeed(canvasId,[ 0.5,-0.25 ]);
删除雲
TagCanvas.Delete(canvasId);
jq方法
$(selector).tagcanvas(“ pause”);//暫停雲動畫
$(selector).tagcanvas(“ resume”);//暫停後恢複雲動畫
//重新加載功能從同一來源重新讀取标簽清單,替換目前清單。它的工作方式與再次調用Start相似,但是不會運作所有初始化代碼。
$(selector).tagcanvas(“ reload”)
//更新功能還會重新加載标簽清單,但會将未更改的标簽保持在(或接近)其目前位置。通過比較标記和href屬性的文本内容(或圖像源)來工作。标簽權重和标題會更新,而不會更改标簽位置。
$(selector).tagcanvas(“ update”);
//簡單來說,就是制定一個标簽,把他轉到最前面
$(selector).tagcanvas(“ tagtofront”,{ id：“ tag1” });
這個方法對象有多個參數:(同js方法的參數)
TagToFront始終将所選标簽移動到雲的前端-如果要将标簽放置在其他位置,則必須使用RotateTag函數。其中lat和lng是坐标,其他參數見js方法
$(selector).tagcanvas(“ rotatetag”,{ id：“ tag1”,lat：30,lng：-45 });
啟動後設定雲的速度和方向
$(selector).tagcanvas(“ setspeed”,[ 0.5,-0.25 ]);
删除雲
$(selector).tagcanvas(“ delete”);
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)