From cc7f9286962ee73af1e66459e5c9d6145dc6550e Mon Sep 17 00:00:00 2001 From: vczero Date: Sun, 19 Apr 2015 16:00:31 +0800 Subject: [PATCH] a --- ctrip/canvas.js | 137 +++++++++++++++++++++++++++++++++++++++++++++++ ctrip/data.js | 1 + ctrip/index.html | 14 +++++ ctrip/util.js | 97 +++++++++++++++++++++++++++++++++ 4 files changed, 249 insertions(+) create mode 100644 ctrip/canvas.js create mode 100644 ctrip/data.js create mode 100644 ctrip/index.html create mode 100644 ctrip/util.js diff --git a/ctrip/canvas.js b/ctrip/canvas.js new file mode 100644 index 0000000..51ad6db --- /dev/null +++ b/ctrip/canvas.js @@ -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); diff --git a/ctrip/data.js b/ctrip/data.js new file mode 100644 index 0000000..d7a3c9d --- /dev/null +++ b/ctrip/data.js @@ -0,0 +1 @@ +window.data = {"circle_eye1":["169","180"],"circle_eye2":["283","150"],"circle_qipao1":["44","270"],"circle_qipao2":["331","420"],"circle_qipao3":["91","405"],"circle_qipao4":["124","427"],"circle_qipao5":["279","446"],"circle_qipao6":["356","369"],"circle_qipao7":["413","270"],"line_bishang":["219","171","224","168","228","166","231","162","235","159","241","159","248","159","254","159"],"line_bixia":["239","219","244","219","249","218","251","218","254","215","255","211"],"line_zui":["190","204","197","204","204","204","208","202","213","201","216","199","221","194","225","192","229","187","232","184","237","180","241","179","244","179","248","177","252","177","258","177","261","177","264","177","270","178","275","181","280","181","284","181"],"polygon_body":["89","312","91","307","91","303","90","299","90","294","91","289","92","284","95","280","99","274","101","271","103","266","107","262","110","257","109","249","109","245","107","242","106","240","106","237","104","234","102","231","101","225","101","220","101","211","101","205","101","200","101","195","101","191","101","188","101","182","101","175","101","168","101","162","102","154","102","148","102","145","103","141","106","136","108","135","109","130","115","127","115","122","121","122","121","116","126","115","126","112","129","110","131","109","134","106","137","104","140","101","145","97","149","96","154","93","163","91","171","88","179","87","186","85","195","85","202","83","214","85","225","85","233","85","240","88","248","87","257","90","264","93","272","100","280","107","285","117","290","126","293","136","297","145","303","151","308","159","311","162","314","170","319","180","320","188","320","194","319","204","316","207","314","210","311","218","315","224","318","230","326","237","335","242","342","244","345","247","349","247","353","248","358","251","361","254","366","255","370","260","371","265","378","272","377","281","369","283","366","283","362","281","354","281","353","281","351","280","349","280","347","278","340","278","339","277","335","278","333","276","329","276","329","280","329","288","329","293","328","303","324","312","319","325","318","328","313","335","308","347","306","347","304","349","301","353","297","360","294","362","290","365","285","368","282","373","279","376","277","377","274","379","269","383","261","390","255","391","249","393","245","394","241","395","237","397","233","397","229","400","225","404","231","413","239","418","244","424","248","436","245","443","241","447","237","452","232","459","230","454","227","450","224","448","223","447","221","442","217","439","213","436","211","434","209","432","208","427","207","421","207","418","204","418","200","419","196","423","193","427","190","427","182","428","177","430","174","430","169","431","163","431","156","432","153","432","150","430","151","424","151","421","152","414","158","408","163","405","168","404","175","404","183","404","187","404","191","404","197","399","195","398","195","395","192","392","192","391","188","388","183","386","179","381","175","378","172","375","169","372","166","370","163","366","160","361","157","358","153","357","151","354","148","348","147","343","143","338","141","333","139","329","137","324","136","319","134","314","132","310","131","303","130","297","129","292","127","291","124","292","121","296","118","300","113","302","109","306","106","311","102","314","97","316","95","318","94","316","92","318","90","315"],"polygon_dupi":["173","277","173","271","175","267","176","264","177","261","177","260","179","255","183","252","185","249","187","249","194","248","199","248","203","248","209","247","215","247","220","245","226","244","232","242","234","242","238","239","245","238","248","236","254","233","262","231","270","230","277","230","287","232","294","235","305","241","311","247","315","253","318","260","316","276","316","283","316","295","315","304","312","314","309","321","305","329","304","333","300","340","297","343","295","347","291","350","289","355","285","360","282","361","279","366","278","368","275","371","268","375","257","381","252","380","248","380","239","380","235","380","229","378","225","376","221","372","218","368","214","363","209","360","204","355","204","353","202","349","199","346","197","341","194","337","189","332","188","330","187","325","185","321","180","311","179","305","177","301","176","298","176","293","175","288"],"polygon_go":["309","102","310","99","312","95","314","90","314","84","312","79","308","74","307","68","305","64","305","54","308","49","311","42","312","39","316","36","320","33","324","30","329","26","333","25","341","22","347","22","353","22","359","22","366","22","372","24","378","25","382","26","391","28","397","30","403","35","408","39","412","43","415","51","418","59","418","67","415","72","413","77","409","80","407","85","403","87","397","89","390","90","385","90","378","96","373","96","367","97","362","98","355","98","350","98","346","98","341","96","337","96","332","95","328","95","323","101","317","105","313","109","311","108"],"polygon_jiuwo1":["145","216","149","213","153","209","157","205","162","203","167","202","174","202","181","208","178","210","175","211","171","216","169","216","164","217","161","219","156","219","151","220","150","220"],"polygon_jiuwo2":["294","174","295","173","297","171","300","168","307","168","313","173","313","179","309","182","306","182","303","181","300","181","299","179","300","181"],"polygon_touquan":["67","129","69","124","71","120","71","115","74","112","75","110","79","110","87","118","92","119","102","127","110","131","115","127","117","124","121","121","132","121","140","121","149","121","157","120","167","118","178","117","185","118","196","117","203","115","208","113","216","112","220","111","225","110","228","108","235","106","241","104","242","104","248","104","250","101","250","103","255","100","258","95","263","93","269","94","274","100","278","110","273","112","270","113","266","117","265","117","260","118","258","121","252","122","248","124","245","125","240","127","236","128","230","130","226","130","222","131","216","132","213","133","207","136","201","136","197","137","189","137","185","140","180","140","175","140","166","143","159","141","153","141","148","141","143","143","139","143","131","143","124","143","119","143","114","142","109","142","106","142","104","147","104","154","100","160","95","164","90","167","86","168","83","170","78","170","78","170","73","170","71","169","71","164","69","161","68","156","67","151","67","146","73","147","78","148","85","148","89","148","94","148","94","145","92","143","92","143","92","145","90","142","89","139","86","139","84","138","83","138","81","137","76","137","74","137","70","137","72","136","71","134","71","131"]}; \ No newline at end of file diff --git a/ctrip/index.html b/ctrip/index.html new file mode 100644 index 0000000..6064665 --- /dev/null +++ b/ctrip/index.html @@ -0,0 +1,14 @@ + + + + + 携程游游矢量化 + + + + + + + + + diff --git a/ctrip/util.js b/ctrip/util.js new file mode 100644 index 0000000..a6c58c1 --- /dev/null +++ b/ctrip/util.js @@ -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);