Question

与windows中的标准绘图程序一样，我正在尝试创建一个非常基本的草图画布程序，用户可以在画布上选择要在画布上绘制的标尺工具。我如何实现这一目标？

我是一个初学者，所以如果答案尽可能简单，我会很感激......

谢谢！

Answer 1

如果我建议你可以使用我的easyCanvas库。它是一个包装标准画布的库，让你像平常一样使用它，但增加了一些方便的功能（GPL3）。

如果这是一个选项，你可以创建你需要的东西，只需这样做就可以了解easyCanvas脚本：

var ez = new easyCanvas();

// enable background handling when drawing
ez.autoClear = true;

// mouse down/up is handled internally so all we need to draw the line
ez.onmousemove = function(e) {
    ez1.line(ez.firstX, ez.firstY, e.x, e.y);
}

（您也可以使用现有的canvas元素 - 这将创建一个覆盖窗口的画布，并在窗口大小更改时自动调整大小，请参阅documentation了解详情。）

更新：easyCanvas现已成为遗产，位于GitHub，以避免链接损坏。

Answer 2

您可以使用包装在容器div中的2个重叠画布。

然后在底部画布上绘制标尺。

enter image description here

这是代码和小提琴：http://jsfiddle.net/m1erickson/8hVC2/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    #wrapper{
        position:relative;
        width:315px;
        height:215px;

    }
    #canvasBottom{
        position:absolute; top:0px; left:0px;
        border:1px solid red;
    }
    #canvasTop{
        position:absolute; top:15px; left:15px;
        border:1px solid red;
    }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvasTop");
    var ctx=canvas.getContext("2d");
    var canvas2=document.getElementById("canvasBottom");
    var ctx2=canvas2.getContext("2d");

    ctx2.beginPath();
    for(var i=0;i<canvas.width;i+=10){
        var y=(i/100==parseInt(i/100))?0:10;
        ctx2.moveTo(i+15,y);
        ctx2.lineTo(i+15,15);
        var x=(i/100==parseInt(i/100))?0:10;
        ctx2.moveTo(x,i+15);
        ctx2.lineTo(15,i+15);
    }
    ctx2.stroke();


    var canvasOffset=$("#canvasTop").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      $("#movelog").html("Move: "+ mouseX + " / " + mouseY);

      // Put your mousemove stuff here

    }

    $("#canvasTop").mousemove(function(e){handleMouseMove(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <p id="movelog">Move</p>
    <div id="wrapper">
        <canvas id="canvasBottom" width=315 height=215></canvas>
        <canvas id="canvasTop" width=300 height=200></canvas>
    </div>
</body>
</html>

如何为画布创建标尺工具？

2 个答案: