SVGEditor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>svg editor</title>
<style>
#toolbox{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 250px;
border-right: 1px solid #CCC;
}
#toolbox h2{
margin: 0;
padding: 0;
background: #EEE;
font-size: 16px;
height: 24px;
line-height: 24px;
padding: 5px 10px;
}
#toolbox form{
padding: 10px;
}
#canvas{
position: absolute;
left:260px;
top: 10px;
bottom: 10px;
right: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,.4);
border-radius: 5px;
}
label{
display: inline-block;
width: 80px;
text-align: right;
}
</style>
</head>
<body>
<div id="toolbox">
<h2>创建</h2>
<form action="" id="create-shape">
<button type="button" create="rect">Rect</button>
<button type="button" create="circle">Circle</button>
<button type="button" create="ellipse">Ellipse</button>
<button type="button" create="line">Line</button>
</form>
<h2>形状</h2>
<form action="" id="shape-attrs">
请先创建图形
</form>
<h2>外观和变换</h2>
<form action="" id="look-and-transform" disabled>
<p>
<label for="" style="display: inline">填充</label>
<input type="color" id="fill" value="#ffffff">
</p>
<p>
<lable style="display: inline">描边</lable>
<input type="color" id="stroke" value="#ff0000">
<input type="range" id="strokeWidth" value="1">
</p>
<p>
<label for="">translateX</label>
<input type="range" id="translateX" min="-400" max="400" value="0">
<label for="">translateY</label>
<input type="range" id="translateY" min="-400" max="400" value="0">
<label for="">rotate</label>
<input type="range" id="rotate" min="-180" max="180" value="0">
<label for="">scale</label>
<input type="range" id="scale" min="-1" max="2" step="0.01" value="1">
</p>
</form> </div>
<div id="canvas"></div>
</body>
<script>
var SVG_NS = 'http://www.w3.org/2000/svg';
// 图形及对应默认属性
var shapeInfo = {
rect:'x:10,y:10,width:200,height:100,rx:0,ry:0',
circle:'cx:200,cy:200,r:50',
ellipse:'cx:200,cy:200,rx:80,ry:30',
line:'x1:10,y1:10,x2:100,y2:100'
};
// 默认公共属性
var defaultAttrs = {
fill: '#ffffff',
stroke: '#ff0000'
}; var createForm = document.getElementById('create-shape');
var attrForm = document.getElementById('shape-attrs');
var lookForm = document.getElementById('look-and-transform'); var svg = createSVG();
var selected = null;
svg.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase() in shapeInfo){
select(e.target);
}
});
createForm.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase()=='button'){
create(e.target.getAttribute('create'));
}
}); attrForm.addEventListener('input',function (e) {
if(e.target.tagName.toLowerCase() !='input')return;
var handle = e.target;
selected.setAttribute(handle.name,handle.value);
}); lookForm.addEventListener('input',function(e){
if(e.target.tagName.toLowerCase()!='input')return;
if(!selected)return;
selected.setAttribute('fill',fill.value);
selected.setAttribute('stroke',stroke.value);
selected.setAttribute('stroke-width',strokeWidth.value);
selected.setAttribute('transform',encodeTranform({
tx:translateY.value,
ty:translateY.value,
scale:scale.value,
rotate:rotate.value
}));
});
function createSVG () {
var svg = document.createElementNS(SVG_NS,'svg');
svg.setAttribute('width','100%');
svg.setAttribute('height','100%');
canvas.appendChild(svg);
return svg;
} function create (name) {
var shape = document.createElementNS(SVG_NS,name);
svg.appendChild(shape);
select(shape);
}
function select (shape) {
var attrs = shapeInfo[shape.tagName].split(',');
var attr,name,value;
attrForm.innerHTML = "";
while(attrs.length){
attr = attrs.shift().split(':');
name = attr[0];
value = shape.getAttribute(name)||attr[1];
createHandle(shape,name,value);
shape.setAttribute(name,value);
}
for(name in defaultAttrs){
value = shape.getAttribute(name)||defaultAttrs[name];
shape.setAttribute(name,value);
}
selected = shape; updateLookHandle();
}
function createHandle (shape,name,value) {
var label = document.createElement('label');
label.textContent = name;
var handle = document.createElement('input');
handle.setAttribute('name',name);
handle.setAttribute('type','range');
handle.setAttribute('value',value);
handle.setAttribute('min',0);
handle.setAttribute('max',800); attrForm.appendChild(label);
attrForm.appendChild(handle);
}
function updateLookHandle () {
fill.value = selected.getAttribute('fill');
stroke.value = selected.getAttribute('stroke');
var t = decodeTransform(selected.getAttribute('transform'));
translateX.value = t?t.tx:0;
translateY.value = t?t.ty:0;
rotate.value = t?t.rotate:0;
scale.value = t?t.scale:1;
}
function decodeTransform (transString) {
var match = /translate\((\d+),(\d+)\)\srotate\((\d+)\)\sscale\((\d+)\)/.exec(transString);
return match?{
tx:+match[1],
ty:+match[2],
rotate:+match[3],
scale:+match[4]
}:null;
}
function encodeTranform (transObject) {
return ['translate(',transObject.tx,',',transObject.ty,') ',
'rotate(',transObject.rotate,') ',
'scale(',transObject.scale,')'].join('');
}
</script>
</html>
SVGEditor的更多相关文章
- 使用css3新属性clip-path制作小图标
一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...
- android5.0----SVG
SVG ----scalable vector Graphics 可缩放矢量图形 android L 即android 5.0的新特性. 1,SVG是干什么的? 可缩放矢量图形是基于可扩展标记语言(标 ...
- DEV中svg图标的使用
0.开始之前 先看看使用效果 在操作栏的使用: 在菜单中的使用 1.简述SVG图标 中文名:可缩放矢量图形 外文名:Scalable Vector Graphics 外语缩写:SVG 开发商:万维网联 ...
- Android 开发 VectorDrawable 矢量图 （一）了解Android矢量图与获取矢量图
VectorDrawable 矢量图 三部曲: Android 开发 VectorDrawable 矢量图 (一)了解Android矢量图与获取矢量图 Android 开发 VectorDrawabl ...
- 如何使用IcoMoon字体图标
如何使用IcoMoon字体图标 一,字体图标工具: 1.登录字体图标网站:https://icomoon.io/app/#/select 2.Svg在线编辑工具:https://c.runoob.co ...
- HTML5: SVG （可缩放矢量图形）
ylbtech-HTML5: SVG (可缩放矢量图形) 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 1. ...
- 使用svgdeveloper 和 svg-edit 绘制svg地图
目录: 1. 描述 2. 准备工作 3. 去除地图模板上的水印(可跳过) 4. 方法一.SVGDeveloper 5. 方法二.SVG-Edit 1. 描述编辑 有的时候我们需要自定义地图,本文提 ...
- jvectormap地图开发和制作任意国家地图
jvectormap官网上提供了世界地图和很多国家的地图,但不是所有国家的地图都有,比如沙特阿拉伯的国家地图就没有,怎么办呢? 在http://www.amcharts.com/svg-maps/上下 ...
- react ant-design自定义图标
ant-design给我们提供的图标不够怎么办呢?答案是我们可以自定义图标. 自定义图标也挺简单的,现在图标推荐用svg格式,那么我们就需要制作svg图片. 下面让我们看看如果制作svg图片吧. 1. ...
随机推荐
- 项目整体说明及WBS练习
乐谱识别研究的意义 纸质乐谱向数字化乐谱的转换,是人类音乐活动与计算机音乐处理之间进行信息交流的必经之路.光学乐谱识别是将纸质乐谱扫描输入计算机后,对乐谱图像加以处理.识别.分析,最终获得乐谱的计算机 ...
- PS2键盘 + LCD12864 实验
本实验是通过LCD12864来显示键盘上被按下的按键,实验比较简单,在LCD12864固定的DDRAM地址上显示,缺点就是不能保存上一次被按的内容,后者会覆盖掉前面,所以屏上仅有一个字符显示.保存上一 ...
- webapp之路--之ios上图标
以前我们用过favicon在浏览器给网站进行身份标识,用法如下: <link href="http://image.feeliu.com/web/favicon.ico" r ...
- JS学习随手笔记
===================字符串===================== 字符串中间的空格也是要算长度的. 每一个字符都可以返回对应的Unicode 编码 文字的简单加密都是通过char ...
- Python tab 命令补全，以及 vim 补全
在python 命令行中,使用补全 python 查看 packages 的目录 可用 sys.path 查看. /usr/lib/python2.7/site-packages vim tab.py ...
- protobuf python api
摘要: python中一切都可以看作类.那么如何查看每个类的API.使用ipython python protobuf 的函数在message中定义 此处所有的api说明:https://devel ...
- 内核kconfig语法及原理
语法 http://www.cnblogs.com/AP0904225/p/5967979.html 目前自己用过 一.菜单 menu "desc" endmenu 二.可配菜单 ...
- 使用USBASP给Arduino烧写bootloader教程
源:使用UsbAsp给UNO烧写bootloader ATMEGA16U2.ATMEGA328P固件烧写教程 arduino板由于操作不发导致固件损坏,或者想更新固件怎么办?今天给大家介绍一下如何使用 ...
- Lucene学习注意要点
相关书籍: <Lucene实战>第二版: <搜索引擎基础教程>: <Lucene搜索引擎开发进阶实战>:(我现在看得书) 学习注意要点: 不要盲目从代码入手,而要先 ...
- jascript基础教程学习总结(2)
摘自:javascript基础教程 用链接对用户进行重定向: js001.html 这个HTML页面基于链接对用户进行重定向 <!DOCTYPE html PUBLIC "-//W3C ...