[Canvas绘图] 第09节迷图档案

本节目标：
(1) 封装图形档案类ShapeProfile类，用于存放常用及漂亮图形。
(2) 实现图形顶点运算与绘制部分的分离。

实现步骤：

把图形顶点计算和绘制放在一块纠缠不清是一个糟糕的主意，所以我打算把它们分离出来，所以我封装了这个ShapeProfile类，专门计算坐标信息。

/**
* @usage   封装常用及精美图形
* @author  mw
* @date    2015年12月02日  星期三  09:22:00
* @param   每个图形中参数
*          (xCenter, yCenter)作为路径旋转中心，
*          r作为外接圆半径来限定范围,
*          angle作为初始旋转值，为0时默认x轴为起始或作为尖角对称轴，
*          edge为图形系列边数。
* @return  路径中顶点按顺序存储的数组[x1, y1, x2, y2,...,xn, yn]。
*
*/function ShapeProfile() {this.retArray = new Array();
/**
* @usage   调用接口
* @author  mw
* @date    2015年12月02日  星期三  09:55:31
* @param   index是图形在档案中的序号
* @return
*
*/this.draw = function(index, xCenter, yCenter, r, edge, angle){index = Math.abs(Math.round(index));xCenter = xCenter ? xCenter:0;yCenter = yCenter ? yCenter:0;r = r? r : 100;edge = edge? edge : 5;angle = angle ? angle : 0;switch (index) {//正多边形case 1: this.nEdge(xCenter, yCenter, r, edge, angle); break;//空心星形case 2: this.nStar(xCenter, yCenter, r, edge, angle); break;case 201: this.nStar(xCenter,yCenter, r, edge, angle, 0.2);break;case 202: this.nStar(xCenter,yCenter, r, edge, angle, 0.3, 3.0); break;//其它default:break;}};/**
* @usage  以顶点递推方式绘制正多边形 #1
* @author  mw
* @date    2015年12月01日  星期二  09:42:33
* @param  (x, y)图形中心坐标，r 外接圆半径 edge 边数
* @return
*
*/this.nEdge = function(x, y, r, edge, angle0) {this.retArray.length = 0;var perAngle = Math.PI * 2 / edge;var a = r * Math.sin(perAngle / 2);var angle = -angle0 ;var xOffset = r * Math.sin(perAngle / 2 - angle0);var yOffset = r * Math.cos(perAngle / 2 - angle0);var x1 = x-xOffset;var y1 = y+yOffset;     for (var i=0; i < edge; i++) {            this.retArray.push(x1);this.retArray.push(y1);x1 = x1 + 2 * a * Math.cos(angle);y1 = y1 + 2 * a * Math.sin(angle);angle -= perAngle;}return this.retArray;};   /**
* @usage   空心星形   #2 #201 #202
* @author  mw
* @date    2015年12月01日  星期二  10:06:13
* @param
* @return
*
*/  this.nStar = function(x, y, r, edge, angle0, arg0, arg1) {this.retArray.length = 0;var perAngle = Math.PI * 2 / edge;var r0 = arg0 ? arg0 * r : r / (2 * (1 + Math.cos(perAngle)));var scale = arg1 ? arg1 : 0.5;var angle = 0.5 * perAngle -angle0;var xOffset = x;var yOffset = y;for (var i =0; i< edge; i++) {this.retArray.push(r0 * Math.cos(angle) + xOffset);this.retArray.push(r0 * Math.sin(angle) + yOffset);this.retArray.push(r * Math.cos(angle - scale * perAngle) + xOffset);this.retArray.push(r * Math.sin(angle - scale * perAngle) + yOffset);angle -= perAngle;}   return this.retArray;}}

我把前几节中的绘制多边形和星型的函数给封装了进去，这样可以很方便的调用。

下面是几个Demo：

(1)

/**
* @usage   ShapeProfile使用例
* @author  mw
* @date    2015年12月02日  星期三  12:06:47
* @param
* @return
*
*/function myplot() {plot.init();setPreference();               setSector(1,1,1,1);axis(0, 0, 180);var shape = new ShapeProfile();//偏移shape.draw(1,100,100);fillCircle(shape.retArray[0], shape.retArray[1], 10);plot.fillText("A", shape.retArray[0]+20, shape.retArray[1]-20, 30);if (shape.retArray.length > 2 && shape.retArray.length % 2 == 0) {plot.beginPath().moveTo(shape.retArray.shift(), shape.retArray.shift());while (shape.retArray.length > 0) {plot.lineTo(shape.retArray.shift(), shape.retArray.shift());}plot.closePath().stroke();}//逆时针为正向，角度以弧度计算shape.draw(1,0,0,100, 4, Math.PI/8);/*X Y-38.268    -92.38892.388   -38.26838.268   92.388-92.388   38.268*/fillCircle(shape.retArray[0], shape.retArray[1], 10);plot.fillText("B", shape.retArray[0]+20, shape.retArray[1]-20, 30);if (shape.retArray.length > 2 && shape.retArray.length % 2 == 0) {plot.beginPath().moveTo(shape.retArray.shift(), shape.retArray.shift());while (shape.retArray.length > 0) {plot.lineTo(shape.retArray.shift(), shape.retArray.shift());}plot.closePath().stroke();}//缺省实现shape.draw(1);fillCircle(shape.retArray[0], shape.retArray[1], 10);plot.fillText("C", shape.retArray[0]+20, shape.retArray[1]-20, 30);if (shape.retArray.length > 2 && shape.retArray.length % 2 == 0) {plot.beginPath().moveTo(shape.retArray.shift(), shape.retArray.shift());while (shape.retArray.length > 0) {plot.lineTo(shape.retArray.shift(), shape.retArray.shift());}plot.closePath().stroke();}}

结果：

(2)

/**
* @usage   ShapeProfile使用例
* @author  mw
* @date    2015年12月02日  星期三  12:06:47
* @param
* @return
*
*/function myplot() {plot.init();setPreference();               setSector(1,1,1,1);axis(0, 0, 180);var shape = new ShapeProfile();//偏移shape.draw(2,100,100,50, 5, Math.PI/2);fillCircle(shape.retArray[0], shape.retArray[1], 10);plot.fillText("A", shape.retArray[0]+20, shape.retArray[1]-20, 30);if (shape.retArray.length > 2 && shape.retArray.length % 2 == 0) {plot//.beginPath().moveTo(shape.retArray.shift(), shape.retArray.shift());while (shape.retArray.length > 0) {plot.lineTo(shape.retArray.shift(), shape.retArray.shift());}plot//.closePath().stroke();}//逆时针为正向，角度以弧度计算shape.draw(2,0,100,100, 4, Math.PI/8);fillCircle(shape.retArray[0], shape.retArray[1], 10);plot.fillText("B", shape.retArray[0]+20, shape.retArray[1]-20, 30);if (shape.retArray.length > 2 && shape.retArray.length % 2 == 0) {plot.beginPath().moveTo(shape.retArray.shift(), shape.retArray.shift());while (shape.retArray.length > 0) {plot.lineTo(shape.retArray.shift(), shape.retArray.shift());}plot.closePath().stroke();}//缺省实现shape.draw(2);fillCircle(shape.retArray[0], shape.retArray[1], 10);plot.fillText("C", shape.retArray[0]+20, shape.retArray[1]-20, 30);if (shape.retArray.length > 2 && shape.retArray.length % 2 == 0) {plot.beginPath().moveTo(shape.retArray.shift(), shape.retArray.shift());while (shape.retArray.length > 0) {plot.lineTo(shape.retArray.shift(), shape.retArray.shift());}plot.closePath().stroke();}}

结果：

(3)

/**
* @usage   ShapeProfile使用例
* @author  mw
* @date    2015年12月02日  星期三  12:06:47
* @param
* @return
*
*/function myplot() {plot.init();setPreference();               setSector(1,1,1,1);axis(0, 0, 180);var shape = new ShapeProfile();//偏移shape.draw(201,100,100,50, 5, 0);fillCircle(shape.retArray[0], shape.retArray[1], 10);plot.fillText("A", shape.retArray[0]+20, shape.retArray[1]-20, 30);if (shape.retArray.length > 2 && shape.retArray.length % 2 == 0) {plot.beginPath().moveTo(shape.retArray.shift(), shape.retArray.shift());while (shape.retArray.length > 0) {plot.lineTo(shape.retArray.shift(), shape.retArray.shift());}plot.closePath().stroke();}//逆时针为正向，角度以弧度计算shape.draw(202,-200,100,100, 4, Math.PI/8);/*X   Y-172.284   -111.481-238.268    -192.388-188.519    -72.284-107.612 -138.268-227.716    -88.519-161.732 -7.612-211.481  -127.716-292.388    -61.732*/fillCircle(shape.retArray[0], shape.retArray[1], 10);plot.fillText("B", shape.retArray[0]+20, shape.retArray[1]-20, 30);if (shape.retArray.length > 2 && shape.retArray.length % 2 == 0) {plot.beginPath().moveTo(shape.retArray.shift(), shape.retArray.shift());while (shape.retArray.length > 0) {plot.lineTo(shape.retArray.shift(), shape.retArray.shift());}plot.closePath().stroke();}//缺省实现shape.draw(2, 0, 0, 100, 7, Math.PI/2);fillCircle(shape.retArray[0], shape.retArray[1], 10);plot.fillText("C", shape.retArray[0]+20, shape.retArray[1]-20, 30);if (shape.retArray.length > 2 && shape.retArray.length % 2 == 0) {plot.beginPath().moveTo(shape.retArray.shift(), shape.retArray.shift());while (shape.retArray.length > 0) {plot.lineTo(shape.retArray.shift(), shape.retArray.shift());}plot.closePath().stroke();}}

结果：

可见调用是非常的方便。

并且可以用这个函数看坐标：

/**
* @usage  查看顶点坐标
* @author  mw
* @date    2015年11月29日  星期日  12:58:09
* @param
* @return
*
*/function mytable() {var table = $$("table");var caption = table.createCaption();caption.innerHTML="顶点映射" +"<p>";//找<tbody>var node = table.firstChild;while (null != node) {/*想知道都有哪些子节点，用这个var text = document.createTextNode(node.nodeName);document.body.appendChild(text);*/if ("TBODY" == node.nodeName) break;          node = node.nextSibling;}var shape = new ShapeProfile();shape.draw(1,0,0,100, 4, Math.PI/8);//单元格插入while (shape.retArray.length > 0) {//插入<tr>           var tr = document.createElement("tr")    //插入<td> xvar td = document.createElement("td");var x = document.createTextNode(shape.retArray.shift().toFixed(3));td.appendChild(x);tr.appendChild(td);//插入<td> yvar td = document.createElement("td");var y = document.createTextNode((-shape.retArray.shift()).toFixed(3));td.appendChild(y);tr.appendChild(td);node.appendChild(tr);}       }

这节就到这里。

[Canvas绘图] 第09节迷图档案相关推荐

[Canvas绘图] 第19节藏图阁(3) 男鞋靴子
本节目标: (1) 收藏图片路径实现步骤: /** * @usage 图形路径数组 * @author mw * @date 2015年12月09日星期三 10:52:25 * @param * ...
[Canvas绘图] 第31节藏图阁(11) AlphaGo与李世石的围棋大战之第一局
本节目标: 借着AlphaGo与李世石的围棋大战的话题正风靡互联网的时机,回味一下以前下棋时的一些往事.曾经有一段时间,阿伟也对围棋着迷过,棋书棋谱看了不少,各种围棋网站也常常光临,但可惜实在忍受 ...
[Canvas绘图] 第35节藏图阁(15) AlphaGo与李世石的围棋大战之第五局
本节目标: 借着AlphaGo与李世石的围棋大战的话题正风靡互联网的时机,回味一下以前下棋时的一些往事.曾经有一段时间,阿伟也对围棋着迷过,棋书棋谱看了不少,各种围棋网站也常常光临,但可惜实在忍受 ...
[Canvas绘图] 第30节沙场点兵
本节目标: (1) 整理这一个月以来产生的代码 (2) 修改bug, 把函数封装成类实现步骤: (1) Map类的修改与功能测试 //Map类的put(), print()功能测试 functio ...
微信小程序使用canvas绘图，圆形头像，网络背景图，文字，虚线，直线
<canvas type="2d" id="shareCanvas0" style="height: 1196rpx;width:578rpx; ...
使用html画简单的图形,HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程使用html5 canvas 绘制精美的图...
HTML5火的正热,最近有个想法也是要用到HTML的相关功能,所以也要好好学习一把. 好好看了一下Canvas的功能,感觉HTML5在客户端交互的功能性越来越强了,今天看了一下Canvas绘图,下边是 ...
如何使用canvas绘图
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用can ...
Android中Canvas绘图之Shader使用图文详解
概述我们在用Android中的Canvas绘制各种图形时,可以通过Paint.setShader(shader)方法为画笔Paint设置shader,这样就可以绘制出多彩的图形.那么Shader是什 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...

[Canvas绘图] 第09节迷图档案

[Canvas绘图] 第09节迷图档案相关推荐

最新文章

热门文章

[Canvas绘图] 第09节 迷图档案

[Canvas绘图] 第09节 迷图档案相关推荐

最新文章

热门文章

[Canvas绘图] 第09节迷图档案

[Canvas绘图] 第09节迷图档案相关推荐