js手动画平滑曲线，贝塞尔曲线拟合

news2025/10/31 9:52:33

效果图：

代码：

<!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>bezier</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #canvas {
            background-color: #dcdcdc;
            margin: 10px;
            display: block;
        }
        .btn {
            margin-left: 10px;
        }
    </style>
</head>
<body>
   <canvas id="canvas" width="800" height="600"></canvas> 
   <button type="button" id="print" class="btn btn-primary">绘制</button>
   <button type="button" id="clear" class="btn btn-primary">清空</button>
   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
   <script>
   var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
var t = 0 //贝塞尔函数涉及的占比比例，0<=t<=1
var clickNodes = [] //点击的控制点对象数组
var bezierNodes = [] //绘制内部控制点的数组
var isPrinted = false //当前存在绘制的曲线
var isPrinting = false //正在绘制中
var num = 0 //控制点数
var isDrag = false //是否进入拖拽行为
var isDragNode = false //是否点击到了控制点
var dragIndex = 0 //被拖拽的点的索引
var clickon = 0 //鼠标按下时间戳
var clickoff = 0 //鼠标抬起
$(canvas).mousedown(function(e){
    isDrag = true
    clickon = new Date().getTime()
    var diffLeft = $(this).offset().left,
        diffTop = $(this).offset().top,
        clientX = e.clientX,
        clientY = e.clientY,
        x = clientX - diffLeft,
        y = clientY - diffTop
    clickNodes.forEach(function(item, index) {
        var absX = Math.abs(item.x - x),
            absY = Math.abs(item.y - y)
        if(absX < 5 && absY < 5) {
            isDragNode = true
            dragIndex = index
        }
    })
}).mousemove(function(e) {
    if(isDrag && isDragNode) {
        var diffLeft = $(this).offset().left,
        diffTop = $(this).offset().top,
        clientX = e.clientX,
        clientY = e.clientY,
        x = clientX - diffLeft,
        y = clientY - diffTop
        clickNodes[dragIndex] = {
            x: x,
            y: y
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        clickNodes.forEach(function(item, index) {
            var x = item.x,
                y = item.y,
                i = parseInt(index, 10) + 1
            ctx.fillText("p" + i, x, y + 20)
            ctx.fillText("p" + i + ': ('+ x +', '+ y +')', 10, i * 20)
            ctx.beginPath()
            ctx.arc(x, y, 4, 0, Math.PI * 2, false)
            ctx.fill()
            ctx.beginPath()
            ctx.moveTo(startX, startY)
            ctx.lineTo(x, y)
            ctx.strokeStyle = '#696969'
            ctx.stroke()
            if (index) {
                var startX = clickNodes[index - 1].x,
                    startY = clickNodes[index - 1].y
                ctx.beginPath()
                ctx.moveTo(startX, startY)
                ctx.lineTo(x, y)
                ctx.stroke()
            }
        })
        if(isPrinted) {
            var bezierArr = []
            for(i = 0; i < 1; i+=0.01) {
                bezierArr.push(bezier(clickNodes, i))
            }
            bezierArr.forEach(function(obj, index) {
                if (index) {
                    var startX = bezierArr[index - 1].x,
                        startY = bezierArr[index - 1].y,
                        x = obj.x,
                        y = obj.y
                    ctx.beginPath()
                    ctx.moveTo(startX, startY)
                    ctx.lineTo(x, y)
                    ctx.strokeStyle = 'red'
                    ctx.stroke()
                }
            })
        }
    }
}).mouseup(function(e) {
    isDrag = false
    isDragNode = false
    clickoff = new Date().getTime()
    if(clickoff - clickon < 200) {
        var diffLeft = $(this).offset().left,
        diffTop = $(this).offset().top,
        clientX = e.clientX,
        clientY = e.clientY
        x = clientX - diffLeft,
        y = clientY - diffTop
        if(!isPrinted && !isDragNode) {
            num++
            var ctx = canvas.getContext('2d')
            ctx.font = "16px Microsoft YaHei";
            ctx.fillStyle = '#696969'
            ctx.fillText("p" + num, x, y + 20);
            ctx.fillText("p" + num + ': ('+ x +', '+ y +')', 10, num * 20)
            ctx.beginPath()
            ctx.arc(x, y, 4, 0, Math.PI * 2, false)
            ctx.fill()
            if(clickNodes.length) {
                var startX = clickNodes[clickNodes.length - 1].x,
                    startY = clickNodes[clickNodes.length - 1].y
                ctx.beginPath() 
                ctx.moveTo(startX, startY)
                ctx.lineTo(x, y)
                ctx.strokeStyle = '#696969'
                ctx.stroke()
            } 
            clickNodes.push({
                x: x,
                y: y
            })
        }
    }
})
$('#print').click(function() {
    if(!num) return
    if(!isPrinting) {
        isPrinted = true
        drawBezier(ctx, clickNodes)
    }
})
$('#clear').click(function() {
    if(!isPrinting) {
        isPrinted = false
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        clickNodes = []
        bezierNodes = []
        t = 0
        num = 0
    }
})

function drawBezier(ctx, origin_nodes) {
    if(t > 1) {
        isPrinting = false
        return
    }
    isPrinting = true
    var nodes = origin_nodes
    t += 0.01
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    drawnode(nodes)
    window.requestAnimationFrame(drawBezier.bind(this, ctx, nodes))
}
function drawnode(nodes) {
    if(!nodes.length) return
    var _nodes = nodes
    var next_nodes = []
    _nodes.forEach(function(item, index) {
        var x = item.x,
            y = item.y    
        if(_nodes.length === num) {
            ctx.font = "16px Microsoft YaHei"
            var i = parseInt(index, 10) + 1
            ctx.fillText("p" + i, x, y + 20)
            ctx.fillText("p" + i + ': ('+ x +', '+ y +')', 10, i * 20)
        }
        ctx.beginPath()
        ctx.arc(x, y, 4, 0, Math.PI * 2, false)
        ctx.fill()
        if(_nodes.length === 1) {
            bezierNodes.push(item)
            if(bezierNodes.length > 1) {
                bezierNodes.forEach(function (obj, i) {
                    if (i) {
                        var startX = bezierNodes[i - 1].x,
                            startY = bezierNodes[i - 1].y,
                            x = obj.x,
                            y = obj.y
                        ctx.beginPath()
                        ctx.moveTo(startX, startY)
                        ctx.lineTo(x, y)
                        ctx.strokeStyle = 'red'
                        ctx.stroke()
                    }
                })
            }
        }
        if(index) {
            var startX = _nodes[index - 1].x,
                startY = _nodes[index - 1].y
            ctx.beginPath()
            ctx.moveTo(startX, startY)
            ctx.lineTo(x, y)
            ctx.strokeStyle = '#696969'
            ctx.stroke()
        }
    })  
    if(_nodes.length) {
        for(var i = 0; i < _nodes.length - 1; i++) {
            var arr = [{
                x: _nodes[i].x,
                y: _nodes[i].y
            }, {
                x: _nodes[i + 1].x,
                y: _nodes[i + 1].y 
            }]
            next_nodes.push(bezier(arr, t))
        }
        drawnode(next_nodes)
    }

}
function factorial(num) { //递归阶乘
    if (num <= 1) {
        return 1;
    } else {
        return num * factorial(num - 1);
    }
}

function bezier(arr, t) { //通过各控制点与占比t计算当前贝塞尔曲线上的点坐标
    var x = 0,
        y = 0,
        n = arr.length - 1
    arr.forEach(function(item, index) {
        if(!index) {
            x += item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
            y += item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
        } else {
            x += factorial(n) / factorial(index) / factorial(n - index) * item.x * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
            y += factorial(n) / factorial(index) / factorial(n - index) * item.y * Math.pow(( 1 - t ), n - index) * Math.pow(t, index) 
        }
    })
    return {
        x: x,
        y: y
    }
}
var getRandomColor = function(){
      return '#'+Math.floor(Math.random()*16777215).toString(16);
}
   </script>
</body>
</html>

转自github： 

beziericon-default.png?t=N6B9https://aaaaaaaty.github.io/bezierMaker.js/playground/playground.html

https://github.com/Aaaaaaaty/blogicon-default.png?t=N6B9https://github.com/Aaaaaaaty/blog 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/749951.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

qt完整教程

qt完整教程

各个组件的意思（功能介绍） Python Qt GUI设计：UI界面可视化组件、属性概述（基础篇—3）-腾讯云开发者社区-腾讯云 qt 如何设计好布局和漂亮的界面。_qt界面_花狗Fdog的博客-CSDN博客 样式表（美化关键）/*灰色*/ Q/*灰色*/ QWidget {background-color: rgb(255, 182, …
阅读更多...
驱动第六次作业

驱动第六次作业

应用test.t #include <stdlib.h> #include <stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h> #include <string.h>int main(int argc, char const *argv[]) {int number;int fd o…
阅读更多...
Redis 从入门到精通【进阶篇】之redis主从复制详解

Redis 从入门到精通【进阶篇】之redis主从复制详解

文章目录 0. 前言&#xff08;1&#xff09;概述&#xff08;2&#xff09; 主从复制设计的目的&#xff1a; 1. 原理解析1.1 全量复制1.2 增量复制 2. 主从节点配置3. 常见问题3.1. 当主服务器不进行持久化时复制的安全性3.2. 为什么主从全量复制使用RDB而不使用AOF&#xff1…
阅读更多...
selenium自动化设计框架之 page object设计模式介绍

selenium自动化设计框架之 page object设计模式介绍

目录 PageObject 简介 PageObject 使用 PageObject 六大原则 基于钉钉打卡的 PO 实战案例 实战代码 总结&#xff1a; pageobject设计思想出自于马丁福勒&#xff08;Martin Flower&#xff0c;对&#xff0c;没错&#xff0c;就是软件教父&#xff09;官网的一篇文章&am…
阅读更多...
使用selenium模拟登录解决滑块验证问题

使用selenium模拟登录解决滑块验证问题

目录 1.登录入口 2.点击“账号密码登录” 3.输入账号、密码并点击登录 4.滑块验证过程 5.小结 本次主要是使用selenium模拟登录网页端的TX新闻&#xff0c;本来最开始是模拟请求的&#xff0c;但是某一天突然发现&#xff0c;部分账号需要经过滑块验证才能正常登录&#x…
阅读更多...
给大家演示 InsCode Stable Diffusion 美图活动一期

给大家演示 InsCode Stable Diffusion 美图活动一期

给大家演示 使用 InsCode Stable Diffusion 今天有点无聊&#xff0c;难得领导出差的出差&#xff0c;请假的请假&#xff0c;开会的开会。 心想&#xff0c;此时不摸鱼更待何时。 下面给大家随便验收一番Diffusion &#xff0c;在这之前也使用了很多&#xff0c;讲真&#xf…
阅读更多...
谈谈VPN是什么、类型、使用场景、工作原理

谈谈VPN是什么、类型、使用场景、工作原理

作者&#xff1a;Insist-- 个人主页&#xff1a;insist--个人主页 作者会持续更新网络知识和python基础知识&#xff0c;期待你的关注 前言 本文将讲解VPN是什么、以及它的类型、使用场景、工作原理。 目录 一、VPN是什么&#xff1f; 二、VPN的类型 1、站点对站点VPN 2、…
阅读更多...
单片机第一季：零基础6——定时器和计时器

单片机第一季：零基础6——定时器和计时器

目录 1&#xff0c;单片机定时器原理 2&#xff0c;51单片机定时器/计数器结构 3&#xff0c;定时器配置 4&#xff0c;示例代码-通过定时器控制LED灯间隔1s闪烁 51 单片机有两组定时器/计数器&#xff0c;因为既可以定时&#xff0c;又可以计数&#xff0c;故称之为定时…
阅读更多...
【R语言】机器学习-手撕逻辑回归

【R语言】机器学习-手撕逻辑回归

【R语言】机器学习-手撕逻辑回归 算法原理 逻辑回归是一种常用的分类算法&#xff0c;它在机器学习领域有着广泛的应用。在介绍具体的实现细节之前&#xff0c;我们先来了解一下逻辑回归的算法原理。 sigmoid函数 逻辑回归使用sigmoid函数&#xff08;也称为逻辑函数&#…
阅读更多...
《TCP IP网络编程》第四章

《TCP IP网络编程》第四章

第 4 章 基于 TCP 的服务端/客户端&#xff08;1&#xff09; 根据数据传输方式的不同&#xff0c;基于网络协议的套接字一般分为 TCP 套接字和 UDP 套接字。因为 TCP 套接字是面向连接的&#xff0c;因此又被称为基于流&#xff08;stream&#xff09;的套接字。 TCP …
阅读更多...
烧屏现象对OLED屏幕质量的影响：如何保持画面清晰度？

烧屏现象对OLED屏幕质量的影响：如何保持画面清晰度？

OLED&#xff08;Organic Light Emitting Diode&#xff09;屏幕作为一种高品质、高对比度和鲜艳色彩的显示技术&#xff0c;越来越受到消费者的青睐。然而&#xff0c;一些用户可能会担心OLED屏幕烧屏的问题。本文将探讨OLED屏幕烧屏的原因、如何预防烧屏以及如何进行正确的维…
阅读更多...
一个完整的项目是怎么做性能测试？资深8年测试总结...

一个完整的项目是怎么做性能测试？资深8年测试总结...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 突然有一天&#…
阅读更多...
解决问题：解除HUE下载10万行的限制

解决问题：解除HUE下载10万行的限制

解决问题&#xff1a;解除HUE下载10万行的限制 这个目录下的 vim /opt/cloudera/parcels/CDH/lib/hue/apps/beeswax/src/beeswax/conf.py可以调整数量 也可以更改为-1&#xff08;表示不限制&#xff09;
阅读更多...
有测试媛的IT团队，产品质量更高

有测试媛的IT团队，产品质量更高

我们都知道&#xff0c;在绝大部分技术团队中&#xff0c;往往阳盛阴衰。而测试团队&#xff0c;可能情况要好一些&#xff0c;据部分机构调查来看男女比例在3:2左右。 根据过往经验来看&#xff0c;有测试媛的IT团队&#xff0c;往往软件质量能更好的得到保证&#xff08;强调…
阅读更多...
【单片机】MSP430F5529单片机的Flash读写控制，MSP430 flash 读写

【单片机】MSP430F5529单片机的Flash读写控制，MSP430 flash 读写

文章目录 内存模型程序 内存模型 https://qq742971636.blog.csdn.net/article/details/108892807 单片机的Flash里面的区域不是全都能写的&#xff1a;https://blog.csdn.net/u014470361/article/details/79297601 找一下手册看看MSP430F5529单片机哪些地址区域能写&#xf…
阅读更多...
nginx常用命令以及安装

nginx常用命令以及安装

目录 前言&#xff1a; 安装&#xff1a; 常用命令&#xff1a; 前言&#xff1a; Nginx的设计理念是高性能、稳定性、开放性和易用性。它的并发能力优秀&#xff0c;可以处理数万个并发连接&#xff0c;并且占用较少的资源。此外&#xff0c;Nginx支持热部署&#xff0c;即…
阅读更多...
如何将企业联系方式API接口应用于你的移动端APP？

如何将企业联系方式API接口应用于你的移动端APP？

在现代商业世界中&#xff0c;企业需要提供一种快速&#xff0c;高效的方式来让用户获取联系方式。因此&#xff0c;企业联系方式API接口应运而生&#xff0c;它是一种提供了企业联系方式的开放接口&#xff0c;在用户调用时&#xff0c;可以实现即时获取企业的联系方式信息。本…
阅读更多...
python-计算两个矩阵的相似度。

python-计算两个矩阵的相似度。

余弦相似度 在pytorch中&#xff0c;有一个专门的函数用于计算相似度&#xff1a;torch.cosine_similarity() https://pytorch.org/docs/stable/nn.functional.html#cosine-similarity import torch import torch.nn.functional as F input1 torch.randn(100, 128) input2 t…
阅读更多...
【2023，学点儿新Java-32】Java基础小练习：根据圆周率与半径求圆的面积 | 温度转换 | 计算矩形面积 | 判断奇偶数 | 年龄分类

【2023，学点儿新Java-32】Java基础小练习：根据圆周率与半径求圆的面积 | 温度转换 | 计算矩形面积 | 判断奇偶数 | 年龄分类

前情提要&#xff1a; 【2023&#xff0c;学点儿新Java-31】测试&#xff1a;整型和浮点型变量的使用 | 附&#xff1a;计算机存储单位&#xff08;转换关系&#xff09;| 企业真题&#xff1a;为什么0.10.2不等于0.3【2023&#xff0c;学点儿新Java-30】变量的基本使用&#…
阅读更多...
回归预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元多输入单输出回归预测

回归预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元多输入单输出回归预测

回归预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元多输入单输出回归预测 目录 回归预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 回归预测 | MATLAB实…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023