dynamic canvas & Docs
This commit is contained in:
ckcz123 committed
1 parent
f26bc14bf1
commit
fa6d503aac
8 files changed
+250
-147
No files matched your search
+75
@@ -473,12 +473,87 @@ core.maps.removeBlockByIds(floorId, ids)
|
||||
ui.js主要用来进行UI窗口的绘制，比如对话框、怪物手册、楼传器、存读档界面等等。
|
||||
|
||||
|
||||
core.ui.fillText(name, text, x, y, style, font)
|
||||
在某个画布上绘制一段文字。
|
||||
name为画布名，可以是系统画布之一，也可以是任意自定义动态创建的画布名。（下同）
|
||||
text为要绘制的文本，x,y为要绘制的坐标，style可选为绘制的样式，font可选为绘制的字体。
|
||||
|
||||
|
||||
core.ui.fillBoldText(canvas, text, style, x, y, font)
|
||||
在某个画布上绘制一个描黑边的文字。
|
||||
canvas为要绘制的画布的context，text为文本，style为颜色样式，x,y坐标，font可选为要绘制的字体。
|
||||
|
||||
|
||||
core.ui.fillRect(name, x, y, width, height, style)
|
||||
绘制一个矩形。style可选为绘制样式。
|
||||
|
||||
|
||||
core.ui.strokeRect(name, x, y, width, height, style)
|
||||
绘制一个矩形的边框。
|
||||
|
||||
|
||||
core.ui.drawLine(name, x1, y1, x2, y2, style, lineWidth)
|
||||
绘制一条线。lineWidth可选为线宽。
|
||||
|
||||
|
||||
core.ui.drawArrow(name, x1, y1, x2, y2, style, lineWidth)
|
||||
绘制一个箭头。
|
||||
|
||||
|
||||
core.ui.setFont(name, font) / core.ui.setLineWidth(name, lineWidth)
|
||||
设置一个画布的字体/线宽。
|
||||
|
||||
|
||||
core.ui.setAlpha(name, font) / core.ui.setOpacity(name, font)
|
||||
设置一个画布的绘制不透明度和画布本身的不透明度。
|
||||
两者区别如下：
|
||||
- setAlpha是设置"接下来绘制的内容的不透明度"，不会对已经绘制的内容产生影响。比如setAlpha('ui', 0.5)则会在接下来的绘制中使用0.5的不透明度。
|
||||
- setOpacity是设置"画布本身的不透明度"，已经绘制的内容也会产生影响。比如我已经在UI层绘制了一段文字，再setOpacity则也会看起来变得透明。
|
||||
尽量不要对系统画布使用setOpacity（因为会对已经绘制的内容产生影响），自定义创建的画布则不受此限制。
|
||||
|
||||
|
||||
core.ui.setFillStyle(name, style) / core.ui.setStrokeStype(name, style)
|
||||
设置一个画布的填充样式/描边样式。
|
||||
|
||||
|
||||
core.ui.createCanvas(name, x, y, width, height, zIndex)
|
||||
动态创建一个画布。name为要创建的画布名，如果已存在则会直接取用当前存在的。
|
||||
x,y为创建的画布相对窗口左上角的像素坐标，width,height为创建的长宽。
|
||||
zIndex为创建的纵向高度（关系到画布之间的覆盖），z值高的将覆盖z值低的；系统画布的z值可在个性化中查看。
|
||||
创建一个画布后，可以通过 core.dymCanvas[name] 进行调用。
|
||||
|
||||
|
||||
core.ui.findCanvas(name)
|
||||
寻找一个自定义画布的索引；如果存在该画布则返回对应的索引，不存在画布则返回-1。
|
||||
|
||||
|
||||
core.ui.relocateCanvas(name, x, y)
|
||||
重新定位一个自定义画布。
|
||||
|
||||
|
||||
core.ui.resizeCanvas(name, x, y)
|
||||
重新设置一个自定义画布的大小。
|
||||
|
||||
|
||||
core.ui.deleteCanvas(name)
|
||||
删除一个自定义画布。
|
||||
|
||||
|
||||
core.ui.deleteAllCanvas()
|
||||
清空所有的自定义画布。
|
||||
|
||||
|
||||
|
||||
core.ui.drawThumbnail(floorId, canvas, blocks, x, y, size, heroLoc, heroIcon)
|
||||
绘制一个缩略图，比如楼传器界面，存读档界面等情况。
|
||||
floorId为目标楼层ID，canvas为要绘制到的图层，blocks为要绘制的所有图块。
|
||||
x,y为该图层开始绘制的起始点坐标，size为每一格的像素，heroLoc为勇士坐标，heroIcon为勇士图标。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
========== core.utils.XXX 工具类的辅助函数 ==========
|
||||
utils.js主要用来进行一些辅助函数的计算。
|
||||
|
||||
|
||||
@@ -2200,6 +2200,7 @@ if (core.getFlag("door",0)==2) {
|
||||
core.waitHeroToStop(function() {
|
||||
core.removeGlobalAnimate(0,0,true);
|
||||
core.clearMap('all'); core.clearMap('curtain'); // 清空全地图
|
||||
core.deleteAllCanvas();
|
||||
core.drawText([
|
||||
"\t[恭喜通关]你的分数是${status:hp}。"
|
||||
], function () {
|
||||
|
||||
+37
-14
@@ -8,21 +8,44 @@
|
||||
|
||||
HTML5魔塔是使用画布（canvas）来绘制，存在若干个图层，它们之间有一个覆盖关系，后面的图层将覆盖前面的图层。
|
||||
|
||||
所有图层从低往高依次如下：（加[B]的代表该层是大地图）
|
||||
所有图层从低往高依次如下：（加[B]的代表该层是大地图，z-index代表该层的纵向高度）
|
||||
|
||||
- bg**[B]**：背景层；绘制背景图层素材bgmap，和背景贴图
|
||||
- event**[B]**：事件层；所有事件（道具、墙壁、NPC、怪物等）都绘制在这一层进行处理
|
||||
- hero：勇士层；主要用来绘制勇士
|
||||
- event2**[B]**：事件2层；本层主要用来绘制48x32的图片素材的上半部分（避免和勇士错位）
|
||||
- fg**[B]**：前景层；绘制前景图层素材fgmap，和前景贴图
|
||||
- damage**[B]**：显伤层；主要用来绘制怪物显伤和领域显伤
|
||||
- animate：动画层；主要用来绘制动画。
|
||||
- weather：天气层；主要用来绘制天气（雨/雪/雾）
|
||||
- route**[B]**：路线层；主要用来绘制勇士的行走路线图，也用来绘制图块的淡入/淡出效果，图块的移动等。
|
||||
- curtain：色调层；用来控制当前楼层的画面色调
|
||||
- image：图片层；主要用来绘制显示图片；该层之所以在curtain层上是为了可以在全黑时贴大头像图
|
||||
- ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等
|
||||
- data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。
|
||||
- bg**[B]**：背景层；绘制背景图层素材bgmap，和背景贴图 (z-index: 10)
|
||||
- event**[B]**：事件层；所有事件（道具、墙壁、NPC、怪物等）都绘制在这一层进行处理 (z-index: 30)
|
||||
- hero：勇士层；主要用来绘制勇士 (z-index: 40)
|
||||
- event2**[B]**：事件2层；本层主要用来绘制48x32的图片素材的上半部分（避免和勇士错位） (z-index: 50)
|
||||
- fg**[B]**：前景层；绘制前景图层素材fgmap，和前景贴图 (z-index: 60)
|
||||
- damage**[B]**：显伤层；主要用来绘制怪物显伤和领域显伤 (z-index: 65)
|
||||
- animate：动画层；主要用来绘制动画。 (z-index: 70)
|
||||
- weather：天气层；主要用来绘制天气（雨/雪/雾） (z-index: 80)
|
||||
- route**[B]**：路线层；主要用来绘制勇士的行走路线图。 (z-index: 95)
|
||||
- curtain：色调层；用来控制当前楼层的画面色调 (z-index: 100)
|
||||
- ui：UI层；用来绘制一切UI窗口，如剧情文本、怪物手册、楼传器、系统菜单等等 (z-index: 160)
|
||||
- data：数据层；用来绘制一些顶层的或更新比较快的数据，如左上角的提示，战斗界面中数据的变化等等。 (z-index: 170)
|
||||
|
||||
### 动态创建canvas
|
||||
|
||||
从V2.5.3开始，可以在H5样板中任意动态创建canvas并进行使用。
|
||||
|
||||
使用`core.createCanvas(name, x, y, w, h, z)`来动态创建一个画布。
|
||||
|
||||
其中name为动态canvas名称，x,y,w,h为创建的画布相对窗口左上角的像素坐标和长宽，z为画布的纵向高度。
|
||||
|
||||
例如：`core.createCanvas('test', 10, 20, 100, 200, 74)` 创建了一个名为test的画布，其左上角相对窗口的像素坐标为(10,20)，宽100高200，纵向高度74（在动画层和天气层之间）。
|
||||
|
||||
可以通过 `core.dymCanvas[name]` 来获得该画布的context；例如 `core.dymCanvas.test` 就是我们上面创建的画布的context，然后进行操作。
|
||||
|
||||
也可以简单的使用`core.fillText()`, `core.fillRect()`, `core.strokeRect()`等等对画布进行任意绘制。
|
||||
|
||||
``` js
|
||||
core.fillText('test', '这是一段文字', 10, 30, '#FF0000', '16px Verdana'); // 绘制一段文本
|
||||
```
|
||||
|
||||
使用 `core.deleteCanvas(name)` 删除一个动态创建的画布，例如 `core.deleteCanvas('test')`。
|
||||
|
||||
`core.deleteAllCanvas()`可以删除所有动态创建的画布，`core.relocateCanvas(name, x, y)`和`core.resizeCanvas(name, x, y)`可以对画布的位置和大小进行改变。
|
||||
|
||||
更多详细API请参见[API列表](api)。
|
||||
|
||||
## 自定义素材
|
||||
|
||||
|
||||
Reference in new issue
Block a user