魔方吧·中文魔方俱乐部

标题: 介绍一下mf8新的discuz代码——animcube（编辑中） [打印本页]
作者: 假木瓜    时间: 2022-5-10 12:00:30     标题: 介绍一下mf8新的discuz代码——animcube（编辑中）

本帖最后由 假木瓜 于 2022-5-12 10:33 编辑

请打开电脑版查看，因为code块在移动版不显示

cube_master添加了新的discuz代码——animcube，引入了AnimCubeJS，可以在帖子中嵌入魔方模拟器，且不需要插件（java、flash什么的）。魔方模拟功能由AnimCubeJS提供，discuz代码产生width和height的样式和加载js。
我简单介绍一下AnimCubeJS的历史。很久很久以前，Josef Jelínek开发了一个叫AnimCube的Java Applet。后来Michael Feather开发了个用GWT的移植版本，这就是最早的AnimCubeJS。Michael Feather在后面的版本做了很多修改，比如用JavaScript重写、添加更多可用参数。感兴趣的话可以去看一下github那边的提交历史。

animcube系列的discuz代码有5个标签：animcube2、animcube3、animcube4、animcube5、animcube6，它们都是3参数的，
  1. [animcube2={1},{2}]{3}[/animcube2]
复制代码
参数1是宽度，单位是像素。
参数2是高度，单位也是像素。
参数3是传入AnimCubeX()的参数，和直接调用AnimCubeJS的方法是一样的。直接看AnimCubeJS的文档也是可以的。https://cubing.github.io/AnimCubeJS/animcubejs.html
s5-fs8.png [/img]
  1. parameter name: config | value: .txt file

  3. parameter name: bgcolor | value: 十六进制颜色值 (RGB)
  4. //模拟器的背景颜色
  5. //比如ff0000
  6. parameter name: cubecolor | value: 十六进制颜色值 (RGB)

  8. parameter name: butbgcolor | value: 十六进制颜色值 (RGB)
  9. //按钮的背景颜色

  11. parameter name: slidercolor | value: 十六进制颜色值 (RGB)

  13. parameter name: troughcolor | value: 十六进制颜色值 (RGB)

  15. parameter name: clickprogress | value: 0 or 1

  17. parameter name: snap | value: 0 or 1

  19. parameter name: buttonbar | value: 0 - 2

  21. parameter name: buttonheight | value: 9 - 25

  23. parameter name: repeat | value: 0 or 1

  25. parameter name: edit | value: 0 or 1
  26. //设成0就只能整体拖动，不能转动每一层，默认值是1

  28. parameter name: speed | value: 自然数
  29. //动画速度，数字越大，速度越慢，令人困惑。

  31. parameter name: doublespeed | value: 自然数
  32. //单独设置180度转动的速度。如果没有提供这个参数，doublespeed的值默认被设为speed的3/2。

  34. parameter name: position | value: R, U, F, L, D and/or B string

  36. parameter name: scale | value: 自然数

  38. parameter name: align | value: 0 - 2

  40. parameter name: hint | value: 自然数

  42. parameter name: perspective | value: 自然数

  44. parameter name: borderwidth | value: 0 - 20

  46. parameter name: move | value: string from move character set or random

  48. parameter name: movetext | value: 0 - 5 (for 3x3x3 only, other cube sizes: 0 or 1)

  50. parameter name: yz | value: 0 or 1

  52. parameter name: initmove | value: string from move character set, random or #

  54. parameter name: initrevmove | value: string from move character set, random or #

  56. parameter name: demo | value: string from move character set, random or #

  58. parameter name: metric | value: 0 - 3

  60. parameter name: fonttype | value: 0 or 1

  62. parameter name: textsize | value: 5 - 40

  64. parameter name: facelets | value: string of color codes
  65. //设置每片贴纸的颜色。顺序见AnimCubeJS的文档 https://cubing.github.io/AnimCubeJS/animcubejs.html#facelets

  67. parameter name: colorscheme | value: 6 color codes
  68. //贴纸配色

  70. parameter name: colors | value: hexadecimal color string

  72. parameter name: pos | value: string of Lars Petrus' color codes

  74. parameter name: supercube | value: 0 or 1
  75. //值为1时为图案魔方

  77. parameter name: scw | value: 0 - 2

  79. parameter name: gabbacolors | value: 0 or 1

  81. parameter name: scramble | value: 0 - 2

  83. parameter name: randmoves | value: natural number
复制代码
config参数我不推荐在论坛使用，因为需要上传一个配置文件，如果上传在别的站还需要考虑跨域的问题，非常麻烦。
参数写成"parameter_name=value"的形式，如果有多个参数，就用"&"连接，就像URL里的参数一样。

。。。正在添加例子
  1. [animcube3=200,200]config=https://cubing.github.io/AnimCubeJS/AnimCube3.txt[/animcube3]
复制代码
[animcube3=200,200]config=https://cubing.github.io/AnimCubeJS/AnimCube3.txt[/animcube3]
  1. [animcube2=200,200]facelets=gbwrYYYYrbwgBRGRwoogOOWB[/animcube2]
复制代码
[animcube2=200,200]facelets=gbwrYYYYrbwgBRGRwoogOOWB[/animcube2]
大小写并不影响贴纸的颜色。

3x3x3
表层单层转动：U D L R F B

以下是修饰符

加一个m可以转中层
[animcube3=200,230]movetext=1&move=Um.{haha};Um'.{haha};Um2.{haha};Um2'[/animcube3]
可考虑不加 "movetext=1"，然后把公式写在别处。虽然AnimCubeJS有提供M、E、S、X、Y、Z、u、d、l、r、f、b

加一个c可以整体转动
[animcube3=200,230]movetext=1&move=Uc[/animcube3]

加一个s外面两层一起转
[animcube3=200,200]movetext=1&move=Us[/animcube3]

加一个t相邻的两层一起转
[animcube3=200,200]movetext=1&move=Ut[/animcube3]

加一个a，相对的两层同时转
[animcube3=200,200]movetext=1&move=Ua[/animcube3]

2x2x2
只剩c和a
我直接把AnimCubeJS文档那边的例子复制过来了。
  1. [animcube2=200,230]move=LL'RR'FF'BB'UU'DD'UcUc'FcFc'LcLc'UaFaRaRa'Fa'Ua'.{ pause};L2L2'R2R2'F2F2'B2B2'U2U2'D2D2'Uc2Uc2'Fc2Fc2'Lc2Lc2'Ua2Fa2Ra2Ra2'Fa2'Ua2'.{ pause}&movetext=1&snap=1[/animcube2]
复制代码
[animcube2=200,230]move=LL'RR'FF'BB'UU'DD'UcUc'FcFc'LcLc'UaFaRaRa'Fa'Ua'.{ pause};L2L2'R2R2'F2F2'B2B2'U2U2'D2D2'Uc2Uc2'Fc2Fc2'Lc2Lc2'Ua2Fa2Ra2Ra2'Fa2'Ua2'.{ pause}&movetext=1&snap=1[/animcube2]

4x4x4
有m、c、t、s、w、a
  1. [animcube4=240,270]move=LL'LmLm'Rm'RmR'R FF'FmFm'Bm'BmB'B UU'UmUm'Dm'DmD'D UcUc'FcFc'LcLc' UtUt'DtDt'FtFt'BtBt'RtRt'LtLt' RsRwRs'Rw'FsFwFs'Fw'UsUwUs'Uw' UaFaRaRa'Fa'Ua'.{ pause};L2L2'Lm2Lm2'Rm2'Rm2R2'R2 F2F2'Fm2Fm2'Bm2'Bm2B2'B2 U2U2'Um2Um2'Dm2'Dm2D2'D2 Uc2Uc2'Fc2Fc2'Lc2Lc2' Ut2Ut2'Dt2Dt2'Ft2Ft2'Bt2Bt2'Rt2Rt2'Lt2Lt2' Rs2Rw2Rs2'Rw2'Fs2Fw2Fs2'Fw2'Us2Uw2Us2'Uw2' Ua2Fa2Ra2Ra2'Fa2'Ua2'.{ pause}&movetext=1&snap=1[/animcube4]
复制代码
[animcube4=240,270]move=LL'LmLm'Rm'RmR'R FF'FmFm'Bm'BmB'B UU'UmUm'Dm'DmD'D UcUc'FcFc'LcLc' UtUt'DtDt'FtFt'BtBt'RtRt'LtLt' RsRwRs'Rw'FsFwFs'Fw'UsUwUs'Uw' UaFaRaRa'Fa'Ua'.{ pause};L2L2'Lm2Lm2'Rm2'Rm2R2'R2 F2F2'Fm2Fm2'Bm2'Bm2B2'B2 U2U2'Um2Um2'Dm2'Dm2D2'D2 Uc2Uc2'Fc2Fc2'Lc2Lc2' Ut2Ut2'Dt2Dt2'Ft2Ft2'Bt2Bt2'Rt2Rt2'Lt2Lt2' Rs2Rw2Rs2'Rw2'Fs2Fw2Fs2'Fw2'Us2Uw2Us2'Uw2' Ua2Fa2Ra2Ra2'Fa2'Ua2'.{ pause}&movetext=1&snap=1[/animcube4]

5x5x5
有n、m、c、t、s、a
  1. [animcube5=220,250]move=LL'LnLn'LmLm'Rn'RnR'R FF'FnFn'FmFm'Bn'BnB'B UU'UnUn'UmUm'Dn'DnD'D UcUc'FcFc'LcLc' UtUt'DtDt'FtFt'BtBt'RtRt'LtLt' RsRs'FsFs'UsUs' UaFaRaRa'Fa'Ua'.{ pause};L2L2'Ln2Ln2'Lm2Lm2'Rn2'Rn2R2'R2 F2F2'Fn2Fn2'Fm2Fm2'Bn2'Bn2B2'B2 U2U2'Un2Un2'Um2Um2'Dn2'Dn2D2'D2 Uc2Uc2'Fc2Fc2'Lc2Lc2' Ut2Ut2'Dt2Dt2'Ft2Ft2'Bt2Bt2'Rt2Rt2'Lt2Lt2' Rs2Rs2'Fs2Fs2'Us2Us2' Ua2Fa2Ra2Ra2'Fa2'Ua2'.{ pause}&movetext=1&snap=1[/animcube5]
复制代码
[animcube5=220,250]move=LL'LnLn'LmLm'Rn'RnR'R FF'FnFn'FmFm'Bn'BnB'B UU'UnUn'UmUm'Dn'DnD'D UcUc'FcFc'LcLc' UtUt'DtDt'FtFt'BtBt'RtRt'LtLt' RsRs'FsFs'UsUs' UaFaRaRa'Fa'Ua'.{ pause};L2L2'Ln2Ln2'Lm2Lm2'Rn2'Rn2R2'R2 F2F2'Fn2Fn2'Fm2Fm2'Bn2'Bn2B2'B2 U2U2'Un2Un2'Um2Um2'Dn2'Dn2D2'D2 Uc2Uc2'Fc2Fc2'Lc2Lc2' Ut2Ut2'Dt2Dt2'Ft2Ft2'Bt2Bt2'Rt2Rt2'Lt2Lt2' Rs2Rs2'Fs2Fs2'Us2Us2' Ua2Fa2Ra2Ra2'Fa2'Ua2'.{ pause}&movetext=1&snap=1[/animcube5]

6x6x6
有n、m、c、t、s、a
  1. [animcube6=250,280]move=LL'LnLn'LmLm'Rm'RmRn'RnR'R FF'FnFn'FmFm'Bm'BmBn'BnB'B UU'UnUn'UmUm'Dm'DmDn'DnD'D UcUc'FcFc'LcLc' UtUt'DtDt'FtFt'BtBt'RtRt'LtLt' RsRs'FsFs'UsUs' UaFaRaRa'Fa'Ua'.{ pause};L2L2'Ln2Ln2'Lm2Lm2'Rm2'Rm2Rn2'Rn2R2'R2 F2F2'Fn2Fn2'Fm2Fm2'Bm2'Bm2Bn2'Bn2B2'B2 U2U2'Un2Un2'Um2Um2'Dm2'Dm2Dn2'Dn2D2'D2 Uc2Uc2'Fc2Fc2'Lc2Lc2' Ut2Ut2'Dt2Dt2'Ft2Ft2'Bt2Bt2'Rt2Rt2'Lt2Lt2' Rs2Rs2'Fs2Fs2'Us2Us2' Ua2Fa2Ra2Ra2'Fa2'Ua2'.{ pause}&movetext=1&snap=1[/animcube6]
复制代码
[animcube6=250,280]move=LL'LnLn'LmLm'Rm'RmRn'RnR'R FF'FnFn'FmFm'Bm'BmBn'BnB'B UU'UnUn'UmUm'Dm'DmDn'DnD'D UcUc'FcFc'LcLc' UtUt'DtDt'FtFt'BtBt'RtRt'LtLt' RsRs'FsFs'UsUs' UaFaRaRa'Fa'Ua'.{ pause};L2L2'Ln2Ln2'Lm2Lm2'Rm2'Rm2Rn2'Rn2R2'R2 F2F2'Fn2Fn2'Fm2Fm2'Bm2'Bm2Bn2'Bn2B2'B2 U2U2'Un2Un2'Um2Um2'Dm2'Dm2Dn2'Dn2D2'D2 Uc2Uc2'Fc2Fc2'Lc2Lc2' Ut2Ut2'Dt2Dt2'Ft2Ft2'Bt2Bt2'Rt2Rt2'Lt2Lt2' Rs2Rs2'Fs2Fs2'Us2Us2' Ua2Fa2Ra2Ra2'Fa2'Ua2'.{ pause}&movetext=1&snap=1[/animcube6]

附件: s5-fs8.png (2022-5-11 19:36:29, 13.8 KB) / 下载次数 40
http://bbs.mf8-china.com/forum.php?mod=attachment&aid=Mjc2OTExfDg3Mzg4OGVhfDE3MjY1MTM0ODd8MHww
作者: bob424200    时间: 2022-5-11 10:44:35

赞! 非常好的功能, 适合这个时代
作者: zhang2345    时间: 2022-5-11 11:49:41

很赞，这样不会再受制于不同网页对一些插件（java、flash等）的限制了！
作者: 折翼蚂蝗    时间: 2022-5-12 00:33:36

太好了，又一次在我的电脑上显示出了可以操作的魔方太激动了，期待加入更多异形。
作者: zhang2345    时间: 2022-5-13 08:49:18

加油，希望搞出一个国产pCubes！
作者: 假木瓜    时间: 2022-5-13 10:24:36

zhang2345 发表于 2022-5-13 08:49
加油，希望搞出一个国产pCubes！

你这话让我很困惑啊，我又没有开发过模拟器，为什么对我说加油？而且pCubes是桌面应用，暂时也不需要更多了，需要的话把胡波的改成桌面应用也没有障碍。我们最急需的是网页的模拟器，而且要足够轻量，能够嵌入到帖子里，还要支持移动端。
作者: VistaBSOD    时间: 2024-8-2 19:36:08

[animcube2=200,200]facelets=gbwrYYYYrbwgBRGRwoogOOWB[/animcube2]



欢迎光临 魔方吧·中文魔方俱乐部 (http://bbs.mf8-china.com/) Powered by Discuz! X2