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. ...

随机推荐

PhpStorm 10.0注册
ntelliJ IDEA开源社区提供了如下通用激活方法:注册时选择License server,填http://idea.lanyus.com/,然后点击 OK,再点一次OK,就搞定了.注意http ...
hdu1915
对于图的东西总是一筹莫展,没办法,还是翻出以前的基础题来看看,然后慢慢分析吧.路漫漫其修远兮,吾将上下而求索…… void bfs(int x,int y){ for(int k=0;k<8;k ...
Delphi中建立指定大小字体和读取该字体点阵信息的函数(转)
源:Delphi中建立指定大小字体和读取该字体点阵信息的函数 Delphi中建立指定大小字体和读取该字体点阵信息的函数作者:Thermometer Email: webmaster@daheng- ...
RunLoop基础
序言 RunLoop一直是比较高级而又比较神秘的技术,一直以来都没有深入去阅读过苹果给出的官方文档.本篇文章就讲讲苹果官方文档中所介绍的RunLoop,再加上其开源性,让我们一起深入去研究其特性及与线 ...
Linux包管理工具分析
转自:http://blog.csdn.net/carolzhang8406/article/details/14198219 在正式进入讨论之前,先贴几条非常有用的link: linux 发行版比较 ...
csv和excel的区别
excel 文件只能通过excel打开,里面包含公式或者计算. csv文件是一种通用数据格式,可以用很多方式打开,比如excel.csv 以分割数据,用行分割符号分割行级数据,直接上个例子一目了然. ...
Eclipse中GIT插件更新工程到之前版本
因为之前好多次因为对项目文件删除后,发现删除的文件里有些功能模块还是需要的,所以需要恢复到之前的版本.但是一直不知道怎么操作才能恢复到之前版本,索性就直接把工程删了,重新导入,但是这太暴力了,所以看了 ...
【repost】JS中的hook机制
hook机制也就是钩子机制,由表驱动实现,常用来处理多种特殊情况的处理.我们预定义了一些钩子,在常用的代码逻辑中去适配一些特殊的事件,这样可以让我们少些很多if else语句.举个高考加分的例子,比如 ...
iOS开发使用MJRefresh进行刷新
1.将MJRefresh下载后,拖进项目 MJRefresh地址: https://github.com/CoderMJLee/MJRefresh 2.添加头文件 #import "MJRe ...
s3c2440的GPIO驱动
多个通用的GPIO,同时这些端口也拥有一些复用功能(如ADC输入),有部分端口只能输入,有部分端口只能输出,今天我们来看看如何设置一个GPIO的输出电平以及如何获取一个端口的GPIO电平对GPIO进 ...

SVGEditor

SVGEditor的更多相关文章

随机推荐

热门专题