问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

使用单击、鼠标移动和单击绘制矩形

社区维基
1
新手上路，请多包涵

我试图通过用户点击、鼠标移动和点击来绘制一个矩形。我的代码有两个问题。

首先，在绘制一个矩形后，会自动假定将绘制另一个矩形。其次，第二个矩形的起点是创建第一个矩形的最后一次单击。

http://jsbin.com/uqonuw/3/edit

原文由 user2539506 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptcanvas
阅读 425
1 个回答
得票最新
社区维基
1

你很接近。所以，问题不在于 HTML5 中的“canvas”元素，而在于实际上是 div 的画布。

http://jsfiddle.net/d9BPz/546/

为了让我看到您的代码试图完成什么，我必须对其进行整理。需要做的是跟踪方形元素。

每次我们点击画布时，我们都在做两件事之一。我们要么创建一个矩形元素，要么完成一个矩形元素。因此，当我们完成后，将“element”（以前称为“d”）设置为 null 是有意义的。创建元素时，我们必须将新的 DOM 元素分配给“元素”。

每次鼠标移动时，我们都想获取鼠标位置。如果元素正在创建过程中（或“不为空”），那么我们需要调整元素的大小。

然后我们将它全部封装在一个函数中，仅此而已：

 function initDraw(canvas) {
    var mouse = {
        x: 0,
        y: 0,
        startX: 0,
        startY: 0
    };
    function setMousePosition(e) {
        var ev = e || window.event; //Moz || IE
        if (ev.pageX) { //Moz
            mouse.x = ev.pageX + window.pageXOffset;
            mouse.y = ev.pageY + window.pageYOffset;
        } else if (ev.clientX) { //IE
            mouse.x = ev.clientX + document.body.scrollLeft;
            mouse.y = ev.clientY + document.body.scrollTop;
        }
    };

    var element = null;
    canvas.onmousemove = function (e) {
        setMousePosition(e);
        if (element !== null) {
            element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
            element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
            element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
            element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
        }
    }

    canvas.onclick = function (e) {
        if (element !== null) {
            element = null;
            canvas.style.cursor = "default";
            console.log("finsihed.");
        } else {
            console.log("begun.");
            mouse.startX = mouse.x;
            mouse.startY = mouse.y;
            element = document.createElement('div');
            element.className = 'rectangle'
            element.style.left = mouse.x + 'px';
            element.style.top = mouse.y + 'px';
            canvas.appendChild(element)
            canvas.style.cursor = "crosshair";
        }
    }
}

用法：传递您想要制作矩形画布的块级元素。例子：

 <!doctype html>
<html>
<head>
    <style>
    #canvas {
        width:2000px;
        height:2000px;
        border: 10px solid transparent;
    }
    .rectangle {
        border: 1px solid #FF0000;
        position: absolute;
    }
    </style>
</head>
<body>
    <div id="canvas"></div>
    <script src="js/initDraw.js"></script>
    <script>
        initDraw(document.getElementById('canvas'));
    </script>
</body>
</html>

原文由 Spencer Lockhart 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题