wushenghua/vczero.github.io
1
0
Fork 0
mirror of https://github.com/wu736139669/vczero.github.io.git synced 2026-08-05 06:23:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
vczero
2015-04-19 16:00:31 +08:00
parent ee7bb5f1f5
commit cc7f928696
4 changed files with 249 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ctrip/canvas.js
+137
View File
@@ -0,0 +1,137 @@
;(function(exports, require){
var canvas = document.getElementsByTagName('canvas')[0];
var context = canvas.getContext('2d');
var ajax = require.ajax;
var addEvent = require.addEvent;
var data = require.data;
//缩放比例
var SCALE_BIG = 1;
var SCALE_SML = 0.25;
//颜色对应表
var COLOR_LIST = {
BODY: '#63CEF6',
DUPI: '#FFF',
EYE: '#034E68',
ZUIBA: '#0089B5',
TOUQUAN: '#BDF9FB',
JIUWO: '#FFBFE3',
QIPAO: '#C9E8FB',
BISHANG: '#46BEEF',
BIXIA: '#54C5F2',
GO: '#B1DBF2'
};
if(!context){
return;
}
context.scale(0.25, 0.25);
//simple package design pattern
function addDrawFunc(data, part, color, fun){
var xys = data[part];
context.beginPath();
context.strokeStyle = color;
context.lineWidth = 1;
context.fillStyle = color;
fun(xys);
context.stroke();
context.fill();
context.closePath();
}
//draw polygon
function drawPolygon(data, part, color){
addDrawFunc(data, part, color, function(xys){
context.moveTo(xys[0], xys[1]);
for(var i = 2; i < xys.length; i++){
if(i % 2 !== 0){
context.lineTo(xys[i-1], xys[i]);
}
}
});
}
//draw eye
function drawEye(data, part, color){
addDrawFunc(data, part, color, function(xys){
//变形
context.save();
context.scale(1.5, 2);
context.arc(xys[0]/1.5, xys[1]/2, 6, 0, Math.PI * 2, false);
context.restore();
});
}
//drawCircle
function drawCircle(data, part, color, radius){
addDrawFunc(data, part, color, function(xys){
context.arc(xys[0], xys[1], radius, 0, Math.PI * 2, false);
});
}
//draw line
function drawLine(data, part, color, width){
var xys = data[part];
context.beginPath();
context.strokeStyle = color;
context.lineWidth = width;
context.moveTo(xys[0], xys[1]);
for(var i = 0; i < xys.length; i++){
if(i % 2 !== 0){
context.lineTo(xys[i-1], xys[i]);
}
}
context.stroke();
context.closePath();
}
//draw text
function drawText(x, y){
context.beginPath();
context.fillStyle = '#FFFFFF';
context.font = '40px arial,sans-serif';
context.fillText('go...', x, y)
context.fill();
context.closePath();
}
//绘制
function draw(data){
drawPolygon(data, 'polygon_body', COLOR_LIST.BODY);
drawPolygon(data, 'polygon_dupi', COLOR_LIST.DUPI);
drawPolygon(data, 'polygon_touquan', COLOR_LIST.TOUQUAN);
drawPolygon(data, 'polygon_jiuwo1', COLOR_LIST.JIUWO);
drawPolygon(data, 'polygon_jiuwo2', COLOR_LIST.JIUWO);
drawPolygon(data, 'polygon_go', COLOR_LIST.GO);
drawEye(data, 'circle_eye1', COLOR_LIST.EYE);
drawEye(data, 'circle_eye2', COLOR_LIST.EYE);
drawLine(data, 'line_zui', COLOR_LIST.ZUIBA, 4);
drawLine(data, 'line_bishang', COLOR_LIST.BISHANG, 8);
drawLine(data, 'line_bixia', COLOR_LIST.BIXIA, 5);
drawCircle(data, 'circle_qipao1', COLOR_LIST.QIPAO, 30);
drawCircle(data, 'circle_qipao2', COLOR_LIST.QIPAO, 25);
drawCircle(data, 'circle_qipao3', COLOR_LIST.QIPAO, 15);
drawCircle(data, 'circle_qipao4', COLOR_LIST.QIPAO, 20);
drawCircle(data, 'circle_qipao5', COLOR_LIST.QIPAO, 15);
drawCircle(data, 'circle_qipao6', COLOR_LIST.QIPAO, 10);
drawCircle(data, 'circle_qipao7', COLOR_LIST.QIPAO, 16);
drawText(320, 69);
}
draw(data);
})(window, window);
ctrip/data.js
+1
View File
File diff suppressed because one or more lines are too long
ctrip/index.html
+14
View File
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>携程游游矢量化</title>
</head>
<body>
<canvas width="500" height="500" style="border:1px solid red;"></canvas>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="canvas.js" ></script>
</body>
</html>
ctrip/util.js
+97
View File
@@ -0,0 +1,97 @@
/*
* 描述：提供基本的AJAX、JSON、事件绑定
* 时间：2015-04-14
* */
;(function(exports){
//JSON
function jsonParse(data){
if(JSON){
return JSON.parse(data);
}else{
return (new Function('return' + data))();
}
}
//AJAX
function ajax(options, callback){
var method = options.method || 'GET';
var url = options.url || '';
var xmlHttp = null;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open(method, url, true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState === 4 && xmlHttp.status === 200){
callback(jsonParse(xmlHttp.responseText));
}
}
xmlHttp.send();
}
//事件绑定
function addEvent(el, type, callback){
if(!el){
return;
}
if(el.addEventListener){
el.addEventListener(type, callback);
}else{
el.attachEvent('on' + type, callback);
}
return callback;
}
//Tip
var ID_STRING = '_____wlh_tip___0088';
function tipShow(){
var body = document.getElementsByTagName('body')[0];
if(document.getElementById(ID_STRING)){
document.getElementById(ID_STRING).style.display = 'block';
body.style.overflow = 'hidden';
return;
}
var el = document.createElement('div');
el.style.zIndex = 1000;
el.style.width = '300px';
el.style.height = '150px';
el.style.backgroundColor = '#FFF';
el.style.position = 'fixed';
el.style.left = '30%';
el.style.top = '40%';
el.style.opacity = 0.9;
el.style.color = '#00B7FF';
el.style.lineHeight = '150px';
el.style.fontSize = '16px';
el.style.paddingLeft = '20px';
el.style.borderRadius = '3px';
el.innerHTML = '数据正在处理, 请等待......';
el.id = ID_STRING;
body.style.overflow = 'hidden';
body.appendChild(el);
return;
}
function tipHide(){
var body = document.getElementsByTagName('body')[0];
if(document.getElementById(ID_STRING)){
document.getElementById(ID_STRING).style.display = 'none';
body.style.overflow = 'auto';
}
}
exports.ajax = ajax;
exports.addEvent = addEvent;
exports.tipShow = tipShow;
exports.tipHide = tipHide;
})(window);