canvas之橡皮筋技术

最新推荐文章于 2021-11-17 14:19:08 发布
最新推荐文章于 2021-11-17 14:19:08 发布
阅读量1.8k 收藏 5
点赞数 3
分类专栏： 计算机图形学 Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35732147/article/details/99973167
版权

目录

一、使用橡皮筋技术绘制线段

二、使用橡皮筋技术绘制圆

三、使用橡皮筋技术绘制多边形

    橡皮筋的特点是可以拉长与缩短，那么如何在canvas的绘图当中模仿这一特点呢？就是如何产生以下的这种类似橡皮筋的效果呢？

    在canvas绘图中，这种效果的原理是不断的清空画板且不断的绘制图形，而清空画板利用了canvas绘图表面的保存与恢复的机制。

一、使用橡皮筋技术绘制线段

    首先来看一个使用橡皮筋技术绘制线段的示例：

    源代码：

    drawRubberbandLine.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制橡皮筋式线条</title>
    <style>
        body {
            background: #eee;
        }
        #canvas {
            background: #fff;
            cursor: pointer;
            margin-left: 10px;
            margin-top: 10px;
            -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext("2d");

        let drawingSurface = null;      // 用于保存绘图表面
        let mouseDown = null;           // 用于保存鼠标按下时的canvas坐标
        let dragging = false;           // 用于标识鼠标是否处于拖拽状态，只有拖拽状态才可以进行绘制

        // 将浏览器客户区坐标转换为canvas坐标
        function windowToCanvas(clientX, clientY){
            let bbox = canvas.getBoundingClientRect();
            return {
                x: (clientX - bbox.left) / (canvas.width / bbox.width),
                y: (clientY - bbox.top) / (canvas.height / bbox.height)
            };
        }

        // 保存canvas绘图表面
        function saveDrawingSurface(){
            drawingSurface = context.getImageData(0, 0, canvas.width, canvas.height);
        }

        // 恢复canvas绘图表面
        function restoreDrawingSurface(){
            context.putImageData(drawingSurface, 0, 0);
        }
        
        // 绘制线段
        function drawLine(mouseMove){
            context.beginPath();                // 清除当前路径
            context.moveTo(mouseDown.x, mouseDown.y);
            context.lineTo(mouseMove.x, mouseMove.y);
            context.strokeStyle = "green";
            context.stroke();
        }

        canvas.addEventListener("mousedown", (event) => {
            // 保存鼠标按下时的canvas坐标
            mouseDown = windowToCanvas(event.clientX, event.clientY);
            // 标识鼠标处于拖拽状态
            dragging = true;
            // 保存canvas绘图表面
            saveDrawingSurface();
        });

        canvas.addEventListener("mousemove", (event) => {
            if(dragging){
                // 恢复绘图表面
                restoreDrawingSurface();
                let mouseMove = windowToCanvas(event.clientX, event.clientY);
                // 绘制线段
                drawLine(mouseMove);
            }
        });

        canvas.addEventListener("mouseup", (event) => {
            // 标识鼠标不在拖拽状态
            dragging = false;
        });
    </script>
</body>
</html>

    效果：

    代码并不复杂，关键是使用了getImageData()方法和putImageData()方法来保存和恢复绘图表面，以使绘图表面不断清空。

二、使用橡皮筋技术绘制圆

    可以使用橡皮筋技术让线段产生橡皮筋的效果，同时也可以使用橡皮筋技术让圆的半径随意放大与缩小。

    来看使用橡皮筋技术绘制圆的示例:

    源代码：

    drawRubberbandCircle.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用橡皮筋技术绘制圆</title>
    <style>
        body {
            background: #eee;
        }
        #canvas {
            background: #fff;
            cursor: pointer;
            margin-left: 10px;
            margin-top: 10px;
            -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext("2d");

        let drawingSurface = null;      // 用于保存绘图表面
        let mouseDown = null;           // 用于保存鼠标按下时的canvas坐标
        let dragging = false;           // 用于标识鼠标是否处于拖拽状态，只有拖拽状态才可以进行绘制

        // 将浏览器客户区坐标转换为canvas坐标
        function windowToCanvas(clientX, clientY){
            let bbox = canvas.getBoundingClientRect();
            return {
                x: (clientX - bbox.left) / (canvas.width / bbox.width),
                y: (clientY - bbox.top) / (canvas.height / bbox.height)
            };
        }

        // 保存canvas绘图表面
        function saveDrawingSurface(){
            drawingSurface = context.getImageData(0, 0, canvas.width, canvas.height);
        }

        // 恢复canvas绘图表面
        function restoreDrawingSurface(){
            context.putImageData(drawingSurface, 0, 0);
        }
        
        // 绘制圆
        function drawCircle(mouseMove){
            context.beginPath();                // 清除当前路径
            // 使用勾股定理圆的计算半径
            let r = Math.sqrt(Math.pow((mouseMove.x-mouseDown.x), 2) + Math.pow((mouseMove.y-mouseDown.y), 2));
            // 绘制圆
            context.arc(mouseDown.x, mouseDown.y, r, 0, 2*Math.PI, true);
            context.strokeStyle = "blue";
            context.stroke();
        }

        canvas.addEventListener("mousedown", (event) => {
            // 保存鼠标按下时的canvas坐标
            mouseDown = windowToCanvas(event.clientX, event.clientY);
            // 标识鼠标处于拖拽状态
            dragging = true;
            // 保存canvas绘图表面
            saveDrawingSurface();
        });

        canvas.addEventListener("mousemove", (event) => {
            if(dragging){
                // 恢复绘图表面
                restoreDrawingSurface();
                let mouseMove = windowToCanvas(event.clientX, event.clientY);
                // 绘制圆
                drawCircle(mouseMove);
            }
        });

        canvas.addEventListener("mouseup", (event) => {
            // 标识鼠标不在拖拽状态
            dragging = false;
        });
    </script>
</body>
</html>

    效果：

    怎么样，圆的半径是不是可以伴随着鼠标的拖拽随意放大缩小呢？这样绘制圆就容易多了，半径想多大就多大！

    这里绘制圆使用了勾股定理求半径，当然用三角函数也是可以轻松求得的，但是个人感觉还是勾股定理比较简单方便。

三、使用橡皮筋技术绘制多边形

    由于绘制多边形的原理就是使用多边形的外接圆半径求多边形的各个顶点，所以也可以将橡皮筋技术运用在绘制多边形中。

    所以外接圆半径一改变，多边形大小就跟着改变。

    使用橡皮筋技术绘制多边形的示例：

    源代码drawRubberbandPolygon.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用橡皮筋技术绘制多边形</title>
    <style>
        body {
            background: #eee;
        }
        #canvas {
            background: #fff;
            cursor: pointer;
            margin-left: 10px;
            margin-top: 10px;
            -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
        }
    </style>
</head>
<body>
    <input type="number" id="sides" min="3", max="1000", value="3", step="1" />多边形边数</br>
    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
        let canvas = document.getElementById('canvas');
        let context = canvas.getContext("2d");
        let sides = document.getElementById("sides");

        let drawingSurface = null;      // 用于保存绘图表面
        let mouseDown = null;           // 用于保存鼠标按下时的canvas坐标
        let dragging = false;           // 用于标识鼠标是否处于拖拽状态，只有拖拽状态才可以进行绘制

        // 将浏览器客户区坐标转换为canvas坐标
        function windowToCanvas(clientX, clientY){
            let bbox = canvas.getBoundingClientRect();
            return {
                x: (clientX - bbox.left) / (canvas.width / bbox.width),
                y: (clientY - bbox.top) / (canvas.height / bbox.height)
            };
        }

        // 保存canvas绘图表面
        function saveDrawingSurface(){
            drawingSurface = context.getImageData(0, 0, canvas.width, canvas.height);
        }

        // 恢复canvas绘图表面
        function restoreDrawingSurface(){
            context.putImageData(drawingSurface, 0, 0);
        }
        
        // 绘制多边形
        function drawPolygon(mouseMove){
            context.beginPath();                // 清除当前路径
            // 多边形外接圆半径
            let r = Math.sqrt(Math.pow((mouseDown.x - mouseMove.x), 2) + Math.pow((mouseDown.y - mouseMove.y), 2));
            let angle = 0;
            for(let i = 0; i < sides.value; i++){
                let vertex_x = mouseDown.x + r*Math.sin(angle);
                let vertex_y = mouseDown.y - r*Math.cos(angle);
                if(i == 0){
                    // 多边形起始顶点
                    context.moveTo(vertex_x, vertex_y);
                }else{
                    // 多边形其余顶点
                    context.lineTo(vertex_x, vertex_y);
                }
                angle += 2 * Math.PI / sides.value;
            }
            context.closePath();
            context.stroke();
        }

        canvas.addEventListener("mousedown", (event) => {
            // 保存鼠标按下时的canvas坐标
            mouseDown = windowToCanvas(event.clientX, event.clientY);
            // 标识鼠标处于拖拽状态
            dragging = true;
            // 保存canvas绘图表面
            saveDrawingSurface();
        });

        canvas.addEventListener("mousemove", (event) => {
            if(dragging){
                // 恢复绘图表面
                restoreDrawingSurface();
                let mouseMove = windowToCanvas(event.clientX, event.clientY);
                // 绘制线段
                drawPolygon(mouseMove);
            }
        });

        canvas.addEventListener("mouseup", (event) => {
            // 标识鼠标不在拖拽状态
            dragging = false;
        });
    </script>
</body>
</html>

    效果：

     当把多边形的边调大到比较大的值时（比如999），就验证了微积分的思想，因为此时多边形"变成"了圆：

    源代码使用了简单的三角函数来求多边形的顶点。

不睡觉的怪叔叔
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas---Canvas版画图，坐标轴绘制，网格绘制，橡皮筋式画直线
MIKUScallion的专栏
01-25 7580
使用Canvas实现画图程序。 这个量还是比较大的，请允许我慢慢来。 目前做到了：坐标轴的绘制，网格绘制，橡皮筋式画直线 目前的不足：没有应用多个图层将网格，坐标轴与实际绘画区域分离 接下要做：为橡皮筋式画直线添加上辅助线选项 ---------------------------------------------------------------------- -------
python橡皮筋鼠标、参数绘制直线（引力场）、矩形、圆
11-28
python语言使用thinker制作的简易GUI，可通过鼠标拖拽或输入参数来绘制直线、矩形、圆。其中直线使用鼠标右击绘制有引力场的功能，当上一条直线的末端与本次直线的始端在一定范围内，将会自动连接到一起。右击两次清屏。
OpenGL程序之用鼠标实现橡皮筋技术
m0_52623742的博客
11-17 1501
OpenGL程序之用鼠标实现橡皮筋技术前言一、用鼠标实现橡皮筋技术的实现思路如何感知鼠标的点击和移动如何解决坐标对应的问题并使之显示在界面上整体的逻辑二、用鼠标实现橡皮筋技术的实现框架1.鼠标响应函数第一部分：点击响应函数第二部分：移动响应函数2.利用鼠标实现橡皮筋技术第一部分：双缓存第二部分：窗口再整形回调函数第三部分：其它附加知识三、用鼠标实现橡皮筋技术的实现细节及完整代码四、遇到的问题五、问题分析和解决方案六、 显示效果七、总结 前言 橡皮筋技术的关键在于控制图形随着用户的操作（以鼠标移动为例）而不
机器视觉入门之路（二五，橡皮筋技术（可拖拽工具），c#）
ganggangwawa的博客
06-29 995
要截取一幅特征图像，进行学习匹配，经常会用到，那么我们经常会用到矩形框的鼠标拖拽行为，人们称其为橡皮筋技术，首先，我们先拖动一根线，其次再搞定其他。我们仍然遵循最轻量级代码化，以后不足，再扩充。 好，走起！ 第一，声明一条线，并画出来，这一次，线中心多了一个小框，如下： 看代码： mg_line testline4 = new mg_line(new PointF(400, 400), new PointF(600, 400));// PointF m_LineCenter = new ...
Python tkinter库Canvas操作(附涂鸦、颜色表、围棋盘三个实例)
汉阳Hann's Home
03-19 7049
Python tkinter库Canvas操作(附涂鸦、颜色表、围棋盘三个实例)
HTML5 Canvas核心技术 图形、动画与游戏开发
09-19
176 4.1.2　drawimage()方法的用法 177 4.2　图像的缩放 179 4.3　将一个canvas绘制到另一个canvas之中 183 4.4　离屏canvas 186 4.5　操作图像的像素 189 4.5.1　获取图像数据 189 4.5.2　修改图像数据 195 4.6　...
SDI.zip_橡皮筋
最新发布
09-23
在IT行业中，"橡皮筋"通常用于形容一种交互式用户界面（UI）技术，它允许用户通过拖动来绘制或调整图形的边界，就像拉伸橡皮筋一样。这种技术常见于地图应用、绘图软件或者任何需要动态调整形状大小和位置的场景。在...
实现一个橡皮筋的例子
06-23
在设计视图中，我们需要一个空白的Canvas来作为绘图区域。这可以通过添加一个`Panel`控件来实现。设置`Panel`的`Dock`属性为`Fill`，使它充满整个窗体，这样我们就可以在这个`Panel`上进行绘制。 3. **自定义控件*...
WPF 实现的画图程序，支持线、矩形、圆、多边形橡皮筋
07-31
4. **多边形绘制**: 多边形绘制可能使用`Polygon`或`Path`元素，结合橡皮筋绘图技术，允许用户自由拉伸点来形成和调整多边形的形状。 5. **用户交互**: WPF提供丰富的事件处理机制，如鼠标和键盘事件，使得用户能够...
Canvas：橡皮筋线条绘制
weixin_30467087的博客
11-24 138
Canvas：橡皮筋线条绘制 效果演示 实现要点 事件监听 【说明】： 在Canvas中检测鼠标事件是非常简单的，可以在canvas中添加一个事件监听器，当事件发生时，浏览器就会调用这个监听器。 我们可以使用绑定事件属性： canvas.onmousedown = function(e) { //..... }　　 此外，也可以使用更为通用的addEvent...
橡皮筋技术，实现直线，矩形，圆，另外增加功能椭圆的绘制
09-14
橡皮筋技术，实现直线，矩形，圆，另外增加功能椭圆的绘制
opengl橡皮筋技术
11-02
计算机图形学基础（第二版）OpenGL橡皮筋技术改良版，
橡皮筋技术
07-19
能够实现简单的画线 花园 技术不成熟请高手指点－－－－－－
橡皮筋绘画技术
07-28
NULL 博文链接：https://lark19911-163-com.iteye.com/blog/778785
python canvas教程_python–Tkinter教程之Canvas篇(3) | 学步园
weixin_29113371的博客
12-30 273
'''Tkinter教程之Canvas篇(3)''''''16.移动item'''#-*-coding:cp936-*-#move指定x,y在偏移量from Tkinter import *root = Tk()# 创建一个Canvas，设置其背景色为白色cv = Canvas(root,bg = 'white')# 创建两个同样的rectangle，比较移动前后的不同rt1 = cv....
python——GUI纸上谈兵 之canvas完全攻略
weixin_47249161的博客
09-19 3455
Tkinter 提供了 Canvas 组件来实现绘图。程序既可在 Canvas 中绘制直线、矩形、椭圆等各种几何图形，也可绘制图片、文字、UI 组件（如 Button）等。Canvas 允许重新改变这些图形项（Tkinter 将程序绘制的所有东西统称为 item）的属性，比如改变其坐标、外观等。 Canvas 组件的用法与其他 GUI 组件一样简单，程序只要创建并添加 Canvas 组件，然后调用该组件的方法来绘制图形即可。如下程序示范了最简单的 Canvas 绘图： from tkinter import
橡皮筋算法的原理和实现
热门推荐
敦格
12-25 1万+
橡皮筋算法       程序员，可以选择研究技术，也可以选择赚钱。但是以赚钱的心态去做程序员，会品尝不到技术的很多快乐。 1.橡皮筋算法原理      橡皮筋算法，指的是什么，我们都应该很清楚了。以直线为例，就是直线的一端固定，拉着直线的另一个端点，不断调整直线的位置，直到找到合适的位置后，直线才真正的画出来，前面的线不保留。      按照我们一般的逻辑思维，就是不断的擦除刚画过的线，只保留最后
OpenGL利用鼠标、键盘分别实现那些绘图软件中的橡皮筋技术
derbi123123的博客
03-27 2654
橡皮筋技术： 如果大家用绘图软件画过直线，你就会发现选中那些直线、椭圆、矩形画图工具后，在画布上单击拖动就能画出我们所需尺寸的对应图形，十分方便，这就是所谓的橡皮筋技术。 实现橡皮筋技术的关键函数： 当然是鼠标响应函数了，OpenGL提供了以下几种响应鼠标事件的函数： 鼠标按下或者松开的响应函数：glutMouseFunc(MousePlot); 参数MousePlot是对应的回调函数，可以随...
深入探索HTML5 Canvas技术
第八章和第九章分别展示了如何使用Canvas创建一个太空保龄球游戏和躲避小行星的游戏，这两个实例涵盖了游戏开发的关键概念和技术。 第十章“Taking Things Further and the Future of Canvas”展望了Canvas的未来，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值