Question

我在网上提供的大量资源的帮助下熟悉了画布，并尝试将其与svg进行比较。我的应用程序需要绘制有限数量的形状，但需要是交互式的。我认为svg更适合形状是dom元素。如果有人可以将画布示例（请参阅demo）转换为仅依赖于jQuery和html5的svg（不要担心IE），那将会很有帮助。

在示例中，我需要使用鼠标绘制一个矩形（左键单击并拖动）。你可以将每个元素添加到dom中（在画布中我可能需要为rect对象保留一个数组，因为屏幕会在每个事件上清除）。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="draw.js"></script>
</head>
<body>
    <canvas id="cvs" height="600" width="800"></canvas>
</body>
<    /html>

$(document).ready(function() {
    var cvs = $("#cvs"),
        ctx = cvs.get(0).getContext("2d");
    var v_bufX, v_bufY, v_bufW, v_bufH;

    var box = function ( ctx, style, x, y, w, h ) {        
            ctx.beginPath();
            ctx.rect( x, y, w, h );
            ctx.closePath();
            if ( style.fill ) {
                ctx.fillStyle = style.fill;
                ctx.fill();
            }
            if ( style.stroke ) {
                ctx.strokeStyle = style.stroke;
                ctx.lineWidth = style.width || 1;
                ctx.stroke();
            }
        },
        draw = function (res) {
            var style = {fill:'rgba(96,185,206, 0.3)',stroke:'rgb(96,185,206)',width:.5};
            ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); 
            box(ctx, style, res.x, res.y, res.w, res.h);
        };

    var rect = {
        reset : function () {
            this.x0 = this.y0 = this.x = this.y = this.w = this.h = -1;
            this.started = this.dragging = false;
        },    
        mousedown : function (e) {
            this.reset();
            this.started = true;
            this.x0 = e._x;
            this.y0 = e._y; 
        },
        mousemove : function (e) {
          if (!this.started) {
            return;     
          }

          var x = Math.min(e._x,  this.x0),
              y = Math.min(e._y,  this.y0),
              w = Math.abs(e._x - this.x0),
              h = Math.abs(e._y - this.y0);
         console.log(x, y, w, h);

          if (!w || !h) {
          return;       
          };
          this.x = x;
          this.y = y;
          this.w = w;
          this.h = h;
          draw(this);
        },
        mouseup : function (ev) {
          if (this.started) {
            this.mousemove(ev);
            this.started = false;
            draw(this);
          }
        }
    };


    $(window).mousedown(function(e) {       
        var canvasOffset = cvs.offset();
        e._x = Math.floor(e.pageX-canvasOffset.left); 
        e._y = Math.floor(e.pageY-canvasOffset.top);
        rect.mousedown(e);          
    }); 
    $(window).mousemove(function(e) {
        var canvasOffset = cvs.offset();
        e._x = Math.floor(e.pageX-canvasOffset.left); 
        e._y = Math.floor(e.pageY-canvasOffset.top);
        rect.mousemove(e);
    });
    $(window).mouseup(function(e) {
        var canvasOffset = cvs.offset();
        e._x = Math.floor(e.pageX-canvasOffset.left); 
        e._y = Math.floor(e.pageY-canvasOffset.top);
        rect.mouseup(e);
    });
});

Answer 1

我不愿意重写整个示例，但这里有一些可能有用的资源：

Embedding SVG in XHTML5 - 包含一个简单的JavaScript，可以编程方式创建一些元素。
Dragging Transformed Elements - 使用我自己的拖动代码和帐户进行转换后的层次结构中的翻译。
SVGPan - 一个用于平移和缩放的漂亮库
Raphael - 一个用于从JavaScript创建SVG / VML（用于旧IE）的库，包括它自己的可拖动实现。
KevLinDev - 一个令人尊敬但却非常丰富的与SVG相关的教程和代码来源。

将html5画布示例翻译为svg

1 个答案: