clay-core
Version:
Provide a more friendly web-side drawing interface!
81 lines (77 loc) • 3.67 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../libs/easycss-1.3.1.min.css">
<link rel="stylesheet" href="../../libs/prettify.css">
<link rel="stylesheet" href="../../doc.css">
<script src="../../libs/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<header>
图层和区域管理者
</header>
<p>
关于图层和区域管理者的设计细节请查看教程中的图层、区域管理者一节，这里只简单列出接口。
</p>
<h2>
图层管理者
</h2>
<pre class='prettyprint lang-js'>var layerManger=$$('canvas').layer([width, height]);</pre>
<p>
使用图层的第一步是通过上面的方法获取布局管理者，剩下的就是通过调用layerManger提供的方法使用图层绘图。
</p>
<p class="warn">
默认采用页面canvas大小建立图层，你也可以传递宽和高来指定图层大小。
</p>
<pre class='prettyprint lang-js'>var pencil=layerManger.painter(id);</pre>
<p>
返回图层名称为id的图层上的画笔，该画布和canvas2D上的画笔用法一样，使用该画笔绘制的图形会保存在对应图层上。
</p>
<p class="warn">
不使用图层获取画笔的方法是：$$('canvas').painter();
</p>
<pre class='prettyprint lang-js'>layerManger.clean(pencil);</pre>
<p>
传递某个图层上的画笔(painter方法的id也可以)，会清除该画笔对应的图层上保存的全部图形。返回图层管理者。
</p>
<pre class='prettyprint lang-js'>layerManger.update();</pre>
<p>
把图层管理者管理的图层合并到页面画布中，先获取的画笔绘制的图形在最下面（以第一次获取画笔顺序为准）。返回图层管理者。
</p>
<h2>
区域管理者
</h2>
<pre class='prettyprint lang-js'>var regionManage=clayObject.region([width, height]);</pre>
<p>
和图层管理者不一样的是，区域管理者可以管理任何一个结点的区域，当然，第一步依旧是获取管理者，余下就是调用管理者提供的服务即可。
</p>
<p class="warn">
默认采用页面canvas大小建立区域管理者，你也可以传递宽和高来指定区域管理者管理范围。
</p>
<pre class='prettyprint lang-js'>regionManage.drawer(region_id,function(pencil){
// 用pencil这种画笔画出区域
});</pre>
<p>
region_id用来标记编辑的区域是哪个，pencil不可以修改fillStyle和strokeStyle的值。返回区域管理者。
</p>
<p>
如果上面的方法第二个参数不是一个方法，会返回绘制区域的画笔，别的不变。
</p>
<pre class='prettyprint lang-js'>regionManage.erase(function(erase){
// 用erase擦除不需要标记的区域，如果传递的参数不是函数或未传递，则擦除全部区域标记信息
});</pre>
<p>
和drawer方法类似，只不过功能相反，擦除的地方被标记为不属于任何区域。返回区域管理者。
</p>
<pre class='prettyprint lang-js'>var region_id=regionManage.getRegion(event);</pre>
<p>
需要传递一个参数event，返回此刻鼠标所在区域的标志id，如果不在任何区域，返回undefined。
</p>
<p class="warn">
无论是擦除还是添加新的区域，都需要在最后调用fill或stroke方法。
</p>
</body>
</html>