// Raphael 实例一 画圆 _________________________________________________________________________ // 把SVG插入到该节点内 var paper = new Raphael($('#canvas_container')[0], 500, 500); // 100, 100 坐标点 // 50半径 var circle = paper.circle(100, 100, 50); // Raphael 实例二 矩形 _________________________________________________________________________ var paper = new Raphael($('#canvas_container')[0], 500, 500); // 200.5, 200.5 坐标点 // 250, 100 宽 高 var rect = paper.rect(200.5, 200.5, 250, 100); // Raphael 实例三 椭圆 _________________________________________________________________________ var paper = new Raphael($('#canvas_container')[0], 500, 500); // 150, 150 坐标点 // 100 椭圆水平半径 // 70 椭圆垂直半径 var elli = paper.ellipse(150, 150, 100, 70); // Raphael 实例四 画路径 _________________________________________________________________________ var paper = new Raphael($('#canvas_container')[0], 500, 500); // M250 250 表示起点 // l 0 -50 标识下一个坐标点 (小写l 标识相对当前坐标 其他l xx xx值一样) // z 标识闭合 var tetronimo = paper.path("M250 250, l0 -50,l-50 0, l0 -50, l-50 0, l0 50, l-50 0, l0 50 Z"); // Raphael 实例五 修改属性方法attr _________________________________________________________________________ var tetronimo = paper.path("M250 250, l0 -50,l-50 0, l0 -50, l-50 0, l0 50, l-50 0, l0 50 Z"); // attr 修改的属性的方法 tetronimo.attr({ // 背景色 'fill' : '#9cf', // 线的颜色 'stroke' : '#ddd', // 线宽 'stroke-width' : 5 }); var tetronimo = paper.path("M250 250, l0 -50,l-50 0, l0 -50, l-50 0, l0 50, l-50 0, l0 50 Z"); // attr 修改属性的方法 tetronimo.attr({ // 渐变 90 角度 #f00 初始颜色 #fff结束颜色 'gradient' : '90-#f00-#fff', // stroke 线的颜色 'stroke' : '#3b4449', // 线的宽度 'stroke-width' : 10, // 边缘的样式 // round 边缘是圆角 // bevel 边缘是斜角 // miter 边缘是直角 'stroke-linejoin' : 'round' [“bevel”, “round”, “miter”] }); // Raphael 实例六 transform animate方法 _________________________________________________________________________ // 画路径 // M 表示起点 // l 标识相对坐标 var tetronimo = paper.path("M250 250, l0 -50,l-50 0, l0 -50, l-50 0, l0 50, l-50 0, l0 50 Z"); // 设置属性 tetronimo.attr({ // 角度和渐变色 'gradient' : '90-#f00-#000', // 线的颜色 'stroke' : '#3b4449', // 线的宽度 'stroke-width' : 10, // 直角边缘样式为圆角 'stroke-linejoin' : 'bevel', // 设置transform属性 // t 表示translate // r 表示rotate // s 表示缩放 transform : 't100, 100 r45 t-100, 0 s0.5' }); // animate 动画方法 // 如果animate中要transform有效果 // 和attr中的transform属性不能相同 否则没有效果 // bounce 回弹效果 tetronimo.animate({ transform : 't100,100r45t-100,111' }, 2000, 'bounce'); // animate 回调函数 var tetronimo = paper.path("M250 250, l0 -50,l-50 0, l0 -50, l-50 0, l0 50, l-50 0, l0 50 Z"); tetronimo.attr({ 'gradient' : '90-#f00-#000', 'stroke' : '#3b4449', 'stroke-width' : 10, 'stroke-linejoin' : 'bevel', transform : 't100, 100 r45 t-100, 0 s0.5' }); tetronimo.animate({ transform : 'r360', 'stroke-width' : 1 // 回调方法 // animate 执行完以后的回调方法 // 再次执行一次animate }, 2000, function (){ this.animate({ transform : 'r-90', stroke : '#3b4449', 'stroke-width' : 10 }, 1000); }); // Raphael 实例七 animate 补间动画 _________________________________________________________________________ var tetronimo = paper.path("M250 250, l0 -50,l-50 0, l0 -50, l-50 0, l0 50, l-50 0, l0 50 Z"); tetronimo.attr({ stroke : 'none', // 填充颜色 fill : 'blue' }); tetronimo.animate({ // 修改路径 path : 'M250 250, l0 -50, l-50 0, l0 -50, l-100 0, l0 50, l50 0, l0 50 Z' // elastic 弹性效果 }, 1000, 'elastic'); // Raphael 实例八 绘制文本 _________________________________________________________________________ // DOM可访问性 // 250, 250 文本的坐标 var circ = paper.circle(250, 250, 40); circ.attr({ fill : '#000', stroke : 'none' }); var text = paper.text(250, 250, '小生爱'); text.attr({ opacity : 0, 'font-size' : 12 }).toBack(); circ.node.onmouseover = function (){ this.style.cursor = 'pointer'; }; circ.node.onclick = function (){ text.animate({ opacity : 1 }, 2000); circ.animate({ opacity : 0 }, 2000, function (){ // 删除该节点 this.remove() }); }; // Raphael 实例八 setViewBox _________________________________________________________________________ // 插入svg节点 var paper = new Raphael($('#canvas_container')[0], 500, 200); /** * setViewBox(x, y, width, height, fit) 设置0,0点 (宽高)放大比例 是否自适应 * x, y : 设置0,0点 这里是0,-10为0,0点 * width, height : 设置宽高(放大比例) 这里是500, 200 如果设置成 200, 10 则表示把200x10的图形显示在500x200的画布上 所以显得放大了 放大的倍数取500/width 或 200/height的最小的倍数值 * fit : 是否让图形自适应新的边界框 这里是true 表示适应新的边界框 */ // 此时的坐标点是0, -10 paper.setViewBox(0, -10, 500, 200, true); paper.circle(10, -10, 10).attr({ 'stroke-width' : 1 }); paper.circle(10, 10, 10).attr({ 'stroke-width' : 1 });