请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
svgdr在线绘制工具有两个版本,重新编写的是第一个版本,基于iframe docsrc创建预览区,第二个版本现在运行于 马黑整站系统 => svgdr on line,使用实体iframe创建预览区。两者其实极为相似,不同之处除预览区创建方式一个虚的一个实的之外,第一版没有网络依赖,直接可以本地运行,即便断开网络。
为方便学习、应用,我将svgdr所有资源连同第一版绘制工具打包成一个目录。需要的请访问我的 永硕网盘,打开后进入“网络相关”目录,找到里面的 svgdr.zip,下载它解压到指定文件夹,在 svgdr 目录里找到 index.html,双击它将使用默认浏览器打开svgdr文档页面,上面左上角有第一版在线绘制工具链接。注意,页面的编写遵循CSS3、HTML5标准,请确保默认浏览器是现代浏览器而非古董级别的浏览器。
svgdr在线绘制工具已经封装好一切,直接输入svgdr绘制指令即可,输入完毕,点击“运行代码”按钮,如果绘制代码准确无误,预览区将呈现相应的SVG图形。在线工具右上角有指令查询,比如想知道画圆的指令,可以输入 circle 或全部或部分字母,就会出现对应指令和参数。全部指令和说明则可通过“文档”链接查找阅读。
工具默认设置svg的尺寸为 400*400,没有设置 viewBox 属性(这将默认使用 0 0 400 400的视口设置),如果需要可以通过指令dr.setsvg({width: 600, height: 600, viewBox: '-100 -100 200 200'});更改svg的尺寸和视口。当svg画布大于预览区尺寸,可以拖曳预览区左下角更改预览区的尺寸以适应画布的大小。
下面给两个绘制实例:
// 设置svg宽高与viewBox
dr.setsvg({width: 600, height: 600, viewBox: '-100 -100 200 200'});
// 画一个填充圆
dr.circle(0, 0, 90, 'olive');
// 变量:顶点数、大圆半径、小圆半径、路径
var total = 5, R = 200, r = 60, path = 'M';
var a = 360 / total; // 平均角度
// 遍历顶点数
Array.from({length:total}).forEach((_,k) => {
// 计算大小外切圆对应的顶点坐标
var X = (200 + R * Math.cos(Math.PI/180 * a * k)).toFixed(2),
Y = (200 + R * Math.sin(Math.PI/180 * a * k)).toFixed(2),
x = (200 + r * Math.cos(Math.PI/180 * (a * k + a/2))).toFixed(2),
y = (200 + r * Math.sin(Math.PI/180 * (a * k + a/2))).toFixed(2);
// 拼接路径
path += `${X} ${Y}, ${x} ${y} `;
});
path += 'Z'; // 封闭路径
dr.path(path, 'none', 'darkred', 2); // 绘制路径
以上实例代码均可在在线工具中运行。svgdr在线工具绘制图形时,均实时生成svg代码,可以点击“svg代码”查看和复制。
|