clay-core
Version:
Provide a more friendly web-side drawing interface!
89 lines (85 loc) • 4.88 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>
<img width=300 src="../../images/barPolar.gif" alt="barPolar layer region">
<p>
在我们使用canvas2D绘图的时候（在我看来，换一个角度，WebGL也适用于这里），总是苦于没有SVG的灵活性，特别是对图片中一个特定图标绑定事件（看看右边的GIF，鼠标悬浮在特定区域显示提示信息）。
</p>
<p>
除此之外，绘图的时候，我们也无法像之前的HTML那样，重绘部分图案，只有全部擦除了重新绘制，这是一件让人沮丧的事实。
</p>
<p>
幸运的是，clay.js提供了类似photoshop的图层功能，而针对图片中一个特定区域绑定事件，抽象了一个区域对象的概念。
</p>
<h2>
图层管理者
</h2>
<p>
之前使用canvas2D绘图的时候，我们总是习惯性的这样获取这只神奇的画笔：
</p>
<pre class='prettyprint lang-js'>var pencil=document.getElementsByTagName('canvas')[0].getContext('2d');</pre>
<p>
通过这只画笔我们就可以直接调用各种canvas2D提供的接口绘制图形了，这的确很炫酷。而为了更方便绘图，clay.js在此基础上抽象了一个图层管理者，我们不直接使用canvas提供的画笔绘图，而是使用图层管理者提供的画笔，就像下面这样：
</p>
<pre class='prettyprint lang-js'>// 创建图层管理者
var layerManger = $$('#canvas').layer();
// 获取不同图层的画笔
// 分别用于绘制背景、数据图形和悬浮提示的图层上的画笔
var bg_pencil = layerManger.painter('bg'),
arc_pencil = layerManger.painter('arc'),
prompt_pencil = layerManger.painter('prompt');</pre>
<p>
我们获取了bg_pencil、arc_pencil和prompt_pencil这三只画笔，当你使用他们绘图时，和之前获取的画笔pencil没有任何区别。唯一的区别是，他们会分别绘制在各自图层上，而不是直接绘制在canvas2D画布上。
</p>
<p>
这样的好处是，其中一只画笔绘制的图形修改，别的画笔绘制的图形不需要重新绘制，不过，你不应该滥用，如果你绘制的图形一成不变，我们鼓励你使用下面的方法获取画笔：
</p>
<pre class='prettyprint lang-js'>var pencil=$$('#canvas').painter();</pre>
<p>
这是clay.js提供的获取canvas2D画笔的方法，和我们最初绘图习惯获取的画笔没有任何区别。
</p>
<p>
需要特别注意，使用图层管理者获取的画笔绘制的图形在对应图层上，如果想同步到页面上的canvas画布上，需要调用这个方法：
</p>
<pre class='prettyprint lang-js'>layerManger.update();</pre>
<p>
关于图层管理者更具体的API就查看接口API部分，下面将说明的区域管理者也是一样。
</p>
<h2>
区域管理者
</h2>
<pre class='prettyprint lang-js'>// 创建区域管理者
var regionManger = $$('#canvas').region();</pre>
<p>
使用区域管理者的第一步是创建一个区域管理者，创建结束后，我们就可以在绘图过程中使用了。比如现在想把一个新绘制的图形记录为一个区域，使用类似下面的代码：
</p>
<pre class='prettyprint lang-js'>regionManger.drawer(id, function (pencil) {
//你需要用pencil这只画笔绘制需要管理的新区域
});</pre>
<p>
pencil这只画笔和普通画笔使用起来一样，只不过你不可以改变fillStyle的值，也不需要在绘图结束的时候调用fill()方法。上面中的id是用来唯一标识这个区域的，同一个id绘制的区域会认为是对之前区域的扩建，如果二个不同id绘制的区域有重叠，后绘制的会覆盖之前绘制的区域。
</p>
<p>
通过区域管理者把需要的区域都通过drawer方法记录起来以后，你可以在需要的时候调用下面的方法获取当前鼠标所在区域：
</p>
<pre class='prettyprint lang-js'>var id=regionManger.getRegion(event);</pre>
<p>
其中id就是当前鼠标所在区域的唯一标识。
</p>
<p>
比如你点击了图形，通过这个标识id，你就知道点击的是哪个区域，从而触发对应事件。
</p>
</body>
</html>