a-canvas v1.0.1

a-canvas

下载 & 引用

  npm i a-canvas
  
  import ACanvas from 'ACanvas'

  ACanvas.start('xx','xx','xx')

说明

前身是 tag-canvas，很不错的一个转canvas3D圆形工具，但是相关文档几乎已经没有，所以自己重构了一下并补全文档，修改了一些已经弃用的语法和删除一些功能

改动

删除以下功能

• 播放音频功能 (感觉没什么意义)
• 图片功能 (这个插件不支持使用图片，有图片需求的小伙伴还是要用tag-canvas)

修改如下

• start(xx,xx,xx) 第二个参数不再只是获取元素 id，也可以通过 .className 实现
• updata 函数暂时以 reload 代替

关于 a 标签

• a 标签内使用 br 将不会换行，因为会有额外 bug 增加，所以去掉了这个功能
• 设置字体时，新加/修改：textFontStyle、textFontFamily 属性，如果要使用样式覆盖的话，请使用 font 属性

初始化 option 所有参数说明

演示样式

以下函数均以此块标签模板为例

  <canvas id="canvas"></canvas>
  <div class="a-list" id="a-list">
      <a id="a1">a1标签</a>
      <a id="a2">a2标签</a>
  </div>

start() 初始画布

类型：Function start(string,string,object)

• argumen1
  • 画布ID
• argumen2
  • 元素列表ID / Class

  // 第二个参数 .a-list #a-list 都可以
  start('canvas','.a-list',{option...})

tagToFront() 元素置于中心点

类型：Function tagToFront(string,object)

object 参数

• id: string
  • 当前画布的 id
• callback: (Canvas,A元素) => void
  • 回调函数里的第一个参数为当前画布，第二个参数为当前事件元素
• time: number 默认:500 毫秒
  • 执行动画的时间

  tagToFront('canvas',{
      id:"a1",
      time: 500,
      callback: (c, a) => {}
  })

rotateTag() 元素置于自定义位置

类型：Function rotateTag(string,object)

object 参数

• id: string
  • 当前画布的 id
• callback: (Canvas,A元素) => void
  • 回调函数里的第一个参数为当前画布，第二个参数为当前事件元素
• time: number 默认:500 毫秒
  • 执行动画的时间
• lat: number
  • 元素移动到 X 轴某处

• lng: number

  • 元素移动到 Y 轴某处

  rotateTag('canvas',{
      id:"a1",
      time: 500,
      lat: 10, 
      lng: 10,
      callback: (c, a) => {}
  })

setDirection() 画布朝向旋转

类型：Function setDirection(string,number[])

• [x, y]
  • x 轴从 0 到 0.1，Y 轴从 0 到 0.1，所以是向右上方缓慢行驶

  setDirection('canvas',[0.1,0.1])

updata() 更新元素数据 (暂以reload为代替)

类型：Function updata(string)

  updata('canvas')

reload() 更新画布

类型：Function reload(string)

  reload('canvas')

delete() 清除画布

类型：Function delete(string)

  delete('canvas')