精华内容
下载资源
问答
  • 获取三次贝塞尔曲线控制点坐标(canvas)
    千次阅读
    2020-09-04 10:16:46
    效果说明

    通过改变贝塞尔曲线的控制点,做出理想的曲线效果,再得到贝塞尔曲线点控制点的坐标。效果如下
    效果演示

    思路

    • 使用canvas的bezierCurveTo方法,观察曲线效果。
    • 控制点的移动实现思路与淘宝的放大镜思路相似
    • 每更新一次控制点都重新绘制贝塞尔曲线和新的控制点

    代码

    这里只获取到坐标点,并没有做过多的后续处理,还比较粗糙。
    代码直接粘贴就好

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        </style>
    </head>
    
    <body>
        <canvas class="can" width="1000" height="1000"></canvas>
        <button>增加</button>
        <script>
        //用来存储贝塞尔曲线的控制点
            var pointarr = [{
                start: { x: 520, y: 10 },
                c1: { x: 20, y: 50 },
                c2: { x: 820, y: 150 },
                end: { x: 520, y: 200 }
            }]
            var canvas = document.querySelector('.can')
            var ctx = canvas.getContext('2d');
    		//绘制出控制点
            function draw_control() {
                for (var i = 0; i < pointarr.length; i++) {
                    var { start, c1, c2, end } = pointarr[i];
                    ctx.strokeStyle = "#7fb069";
                    ctx.beginPath();
                    //绘制c1点与start点的连线
                    ctx.moveTo(start.x, start.y);
                    ctx.lineTo(c1.x, c1.y);
                    //绘制c2点与end点的连线
                    ctx.moveTo(c2.x, c2.y);
                    ctx.lineTo(end.x, end.y);
                    ctx.stroke()
                    ctx.closePath();
                    ctx.fillStyle="#e6aa68"
                    //绘制start点
                    ctx.moveTo(start.x, start.y);
                    ctx.arc(start.x, start.y, 5, 0, 2 * Math.PI);
                    ctx.fill()
                    //绘制c1点
                    ctx.moveTo(c1.x, c1.y);
                    ctx.arc(c1.x, c1.y, 10, 0, 2 * Math.PI);
                    ctx.fill()
                    //绘制c2点
                    ctx.moveTo(c2.x, c2.y);
                    ctx.arc(c2.x, c2.y, 10, 0, 2 * Math.PI);
                    ctx.fill()
                    //绘制end点
                    ctx.moveTo(end.x, end.y);
                    ctx.arc(end.x, end.y, 5, 0, 2 * Math.PI);
                    ctx.fill()
                }
            }
            //绘制贝塞尔曲线
            function draw_line() {
                for (var i = 0; i < pointarr.length; i++) {
                    var point = pointarr[i];
                    ctx.beginPath();
                    ctx.moveTo(point.start.x, point.start.y);
                    ctx.bezierCurveTo(point.c1.x, point.c1.y, point.c2.x, point.c2.y, point.end.x, point.end.y);
                    ctx.strokeStyle = "#ca3c25";
                    ctx.lineWidth = 2;
                    ctx.stroke();
                }
            }
            draw()
            function draw() {
                draw_line();
                draw_control()
            }
            //移动控制点
            canvas.onmousedown = function (e) {
                // movementx,layer
                // if(e.layerX)
                // 判断选中的是哪个控制点
                var index, name;
                for (var i = 0; i < pointarr.length; i++) {
                    index = i
                    var { start, c1, c2, end } = pointarr[i];
                    var tag = Math.abs(start.x - e.layerX) <= 5 && Math.abs(start.y - e.layerY) <= 5;
                    if (tag) {
                        name = 'start'
                        break;
                    }
                    var tag1 = Math.abs(c1.x - e.layerX) <= 10 && Math.abs(c1.y - e.layerY) <= 10;
                    if (tag1) {
                        name = 'c1'
                        break;
                    }
                    var tag2 = Math.abs(c2.x - e.layerX) <= 10 && Math.abs(c2.y - e.layerY) <= 10;
                    if (tag2) {
                        name = 'c2';
                        break;
                    }
                    var tag3 = Math.abs(end.x - e.layerX) <= 5 && Math.abs(end.y - e.layerY) <= 5;
                    if (tag3) {
                        name = 'end';
                        break;
                    }
                }
                if(!name){
                    return
                }
                var { x, y } = pointarr[index][name];
                var space = { x: e.layerX - x, y: e.layerY - y };
                this.onmousemove = function (e) {
                //根据鼠标与控制点的关系得到新的控制点的坐标
                    if (name) {
                        // var {x,y} = pointarr[index][name]
                        x = e.layerX - space.x;
                        y = e.layerY - space.y;
                        pointarr[index][name] = { x, y };
                        var nxt = index + 1
                        if (name == 'end' && pointarr[nxt]) {
                            pointarr[nxt]['start'] = { x, y };
                        }
    
                        ctx.clearRect(0, 0, canvas.width, canvas.height)
                        //绘制新的效果图
                        draw()
                    }
                }
            }
            canvas.onmouseup = function () {
                this.onmousemove = function (e) {
                }
            }
            var btn = document.getElementsByTagName('button')[0];
            //新增贝塞尔曲线
            btn.onclick = function () {
                var i = pointarr.length - 1;
                var { start, end, c1, c2 } = JSON.parse(JSON.stringify(pointarr[i]));
                var dis = end.y - start.y
                start = JSON.parse(JSON.stringify(end));
                end.y = end.y + dis;
                c1.y = c1.y + dis;
                c2.y = c2.y + dis;
                var point = { start, c1, c2, end };
                pointarr.push(point);
                draw()
            }
        </script>
    </body>
    </html>
    

    逼逼赖赖,写完这个,就要去实现贝塞尔曲线运动啦canvas实现贝塞尔曲线运动

    更多相关内容
  • 文中研究了采用IGS连续运行基准站获取曹妃甸2000国家大地坐标坐标的精度。...经过与2000国家C级控制点比较,水平坐标误差在2 cm以内,垂直坐标误差在3 cm以内。此方法可以满足一般工程控制网起算点的要求。
  • 已知不同坐标系的多个坐标点坐标,求两个坐标系的转换矩阵,是matlab写的程序,三维坐标的。 做机器人视觉导航时用到的这个转换。
  • 上海城市坐标系转换的空间校正方法(附控制点文件) 空间校正转坐标系是在无七参数时,简单粗暴的一种转换方法,有效快速但存在一定的误差,误差取决于控制点的个数 空间校正方法 1、去除原数据坐标系 2、编辑器 &...

    空间校正转坐标系是在无七参数时,简单粗暴的一种转换方法,有效快速但存在一定的误差,误差取决于控制点的个数

    空间校正方法(ArcGIS)

    1、去除原数据坐标系
    C:\Users\Magic1412\Desktop\企业微信截图_20201130210745.png

    2、编辑器 > 开始编辑

    3、空间校正 > 设置校正数据
    在这里插入图片描述

    4、空间校正 > 校正方法 > 橡皮页变换(必须选橡皮页)
    在这里插入图片描述
    5、空间矫正 > 链接 > 打开链接文件 > 选择控制点文件
    在这里插入图片描述

    6、空间矫正 > 校正

    7、编辑器 > 保存编辑

    8、给图层赋予正确的坐标系
    在这里插入图片描述

    8、结果
    在这里插入图片描述

    控制点文件

    文件包括上海坐标系和wgs84,百度,国测局/高德之间的转换控制点(wgs84,百度,国测局/高德需为3857投影)
    在这里插入图片描述
    控制点作用范围:上海市内

    注:控制点存在一定误差 ,不适用于精准转换

    链接: https://pan.baidu.com/s/1Zb2ck2p47KzzekQJfK-NsQ 提取码: ny8q

    展开全文
  • https://blog.csdn.net/ctgu361663454/article/details/102477279

     

    import cv2
    import numpy as np
    #图片路径
    img = cv2.imread('031.jpg')
    a =[]
    b = []
    def on_EVENT_LBUTTONDOWN(event, x, y,flags, param):
        if event == cv2.EVENT_LBUTTONDOWN:
            xy = "%d,%d" % (x, y)
            a.append(x)
            b.append(y)
            cv2.circle(img, (x, y), 1, (0, 0, 255), thickness=-1)
            cv2.putText(img, xy, (x, y), cv2.FONT_HERSHEY_PLAIN,
                        1.0, (0, 0, 0), thickness=1)
            cv2.imshow("image", img)
     
    cv2.namedWindow("image")
    cv2.setMouseCallback("image", on_EVENT_LBUTTONDOWN)
    cv2.imshow("image", img)
    cv2.waitKey(0)
    print(a[0],b[0])

     

     

    参考

    https://blog.csdn.net/ctgu361663454/article/details/102477279

    展开全文
  • 本示例从WGS84地理坐标系转换到西安80投影坐标系(中央经线114,三度带投影),提供了多组控制点,我们从中选择了分布均匀的三组控制点参与计算。 七参数计算工具:COORD 数据转换工具:ArcGIS工具箱 1 - 七参数...

    本示例从WGS84地理坐标系转换到西安80投影坐标系(中央经线114,三度带投影),提供了多组控制点,我们从中选择了分布均匀的三组控制点参与计算。

    七参数计算工具:COORD

    数据转换工具:ArcGIS工具箱

    1 - 七参数计算

    注:如果提供了5个以上控制点,未提供七参数用此方法进行计算;计算工具为COORD。

    首先设置好投影,本例中央子午线为114,高斯投影3度带

     

    使用Coord七参数计算工具进行计算,如下图选择计算七参数

     

    输入三组控制点,B代表纬度,L代表经度,H为高程;X和Y一般会省略掉大数,这里控制点中X省略的38,Y省略了4,需要手动加回来;

     

    点击计算

     

    然后点击确定按钮,即为计算的七参数结果,保存好该结果。可通过其他为参与计算的控制点校验计算参数是否准确。

     

    注:七参数计算后导出的txt文件中的旋转角度(XYZ)三个值单位是度,而经常应用的单位是秒。

    2 - 创建自定义坐标变换

    打开ArcGIS红箱子工具,数据管理工具->投影和变换->创建自定义地理(坐标)变换

     

    地理变换名称:这里起名wgs84toxa80,后面转换会用到这个名称。

    输入地理坐标系:选择wgs84坐标系。

    输出地理坐标系:选择xian80三度带投影中央经线114度的投影坐标系。

    自定义变换方法:选择COORDINATE_FRAME(七参数转换方法),下面参数里输入转换好的七参数。点击确定。

     

    3 - 矢量数据坐标系转换

    打开ArcGIS红箱子工具,数据管理工具->投影和变换->矢量->投影

     

    输入数据或要素类:选择wgs84坐标系的数据源dataset

    输出数据集或要素类:根据需要选择转换成果输出目录

    输出坐标系:选择目标西安80坐标系

    地理坐标变换:选择我们创建好的地理坐标系变换wgs84toxa80,点击确定即可

     

    4 - 栅格数据坐标系转换

    打开ArcGIS红箱子工具,数据管理工具->投影和变换->栅格 ->投影栅格

     

    输入参数同矢量投影。

    转载于:https://www.cnblogs.com/gaofan/p/11531705.html

    展开全文
  • FME基于控制点坐标转换

    千次阅读 2018-07-23 11:15:37
    我们经常在数据处理过程中会遇到坐标系不统一的问题,因此需要对数据进行坐标转换,但我们往往没有转换参数,如果我们有两个坐标系的控制点坐标,那么就可以通过控制点对数据进行坐标转换。 1.控制文件 将控制点...
  • UMG——获取UMG 界面坐标点的方法 ** 一,背景 在一些场景中,我们需要在UMG 上进行鼠标点击操作。同时这个UMG 中有时候会出现 三维物体的窗口,用户可以用过鼠标点击之后滑动,在不同的角度和视角观察三维模型的...
  • 本文的主要任务:新建工程,导入照片,设置输出坐标系,导入控制点,导入POS数据,提交自由空三,匹配的连接点检查。 文章目录1. 新建工程2. 导入照片3. 设置输出坐标系4. 导入POS5. 导入像控点6. 自由空三(对齐...
  • 已有资料:80坐标系的控制点坐标,80坐标系的图纸,2000坐标系的控制点坐标。 使用软件:南方cass 成果要求:将80坐标系的图纸转换为2000坐标系的图纸 1、 将两个坐标系的控制点坐标展开到同一cass文档内 打开cass—...
  • 用python获取屏幕上鼠标的坐标

    千次阅读 2022-03-10 19:28:39
    用python获取屏幕上鼠标的坐标
  • C#winform控件的各种坐标获取

    千次阅读 2021-03-11 16:19:47
    二、相对坐标 1.PointToClient 将指定屏幕的位置计算成工作区坐标 Control.PointToClient(p2); p2坐标是相对于屏幕,即屏幕左上角原点(0,0)的坐标;假如Control相对于屏幕原点的坐标为 p1;Control....
  • python获取鼠标的当前坐标

    千次阅读 2021-05-29 09:40:21
    PyAutoGUI是一个纯Python的GUI自动化工具,其目的是可以用程序自动控制鼠标和键盘操作,多平台支持(Windows,OS X,Linux)。 try: print("Press Ctrl-C to end") x,y = pag.position() #返回鼠标的坐标 ...
  • 利用代码得到CAD的坐标,还有一个就是使一个窗口得到焦点
  • Bezier曲线反求控制点

    千次阅读 热门讨论 2020-07-10 14:35:28
    Bezier曲线反求控制点 做曲线拟合的时候,往往希望拟合的曲线通过数据点,这个推导一下Bezier曲线控制点的计算过程. 曲线公式 曲线:C(u)=∑i=0nBn,i(u)Pi基函数:Bn,i=n!i!(n−i)!ui(1−u)n−i 曲线:C(u) = \sum^n...
  • 三维坐标转换 - 已知3个以上控制点在A 和 B坐标系的三维坐标,求解7参数(或转换矩阵),通过7参数(或转换矩阵)转换控制点以外的A坐标系点到B坐标系。要求给出具体求解的C++代码,使用矩阵库eigen. A 坐标和B 坐标存在...
  • 大意是先建一个背景灰度值为0的图片,再把轮廓点集的灰度值设置成a,从轮廓外找一种子P,以4邻域的方式扩充直到遇到轮廓。按照这个思路我写了个demo程序。 #include <opencv2/highgui/highgui.hpp> #...
  • 矢量控制中的坐标变换

    千次阅读 2018-11-07 13:51:02
    矢量控制当中,理论上比较困难的应该就是SVPWM和坐标变换两,这次我就想把坐标变换再详细的说一说。首先会阐明坐标变换是什么以及为何常见形式是矩阵表示。然后抛开矩阵用复数推导电压方程,最后结合正在进行的...
  • Python使用matplotlib绘图,如何在绘图结果上显示每个坐标importmatplotlib.pyplotaspltimportrandomx1=list(range(10))y1=[random.randint(0,10)foriinrange(10)]plt.plot(x1,y1,color='r',markerfacecolor='...
  • 前言:随着国内工业自动化技术的发展,电机作为产线的动力核心,其控制技术的要求也越来越高,电机控制技术在制造业领域的重要程度也逐年增强。其中异步电机作为控制技术最成熟的电机种类之一,其应用范围最为广泛,...
  • 漫水填充经常被用来标记或分离图像的一部分以便对其进行进一步处理或分析,也可以用来从输入图像获取掩码区域,掩码会加速处理过程,或只处理掩码指定的像素,操作的结果总是某个连续的区域。 另外,floodfill...
  • 功能相关 1.缩放一到多个坐标到屏幕内2.拖动后获取屏幕中心
  • 在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法:一:通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计...
  • Openlayers3点击获取坐标

    千次阅读 2017-08-29 10:57:21
    openlayers3点击事件获取xy轴坐标
  • python 读取鼠标点击坐标的实例

    千次阅读 2021-01-30 03:41:39
    python如何抓取鼠标点击事件,并返回点击所在坐标...希望能利用python抓取点击...python tkinter 怎样通过鼠标点击获得坐标 并返回...event里有x、y,是相对坐标,x_root, y_root是屏幕上的坐标。python 如何实现运...
  • 2、控制点 3、控制点 4、结束点 附上下图(网上找的) 利用QT绘制曲线然后通过定时器遍历整条曲线,先看一下效果: 实现代码: #pragma once #include <QPainter> #include <QPoint> #...
  • 坐标信息和矩形宽高放在txt文件中:   整体思路如下: 1:因为图中的矩形框是用不同颜色框出来的,我们可以把每一个颜色的所有矩形框提取出来,变成二值图像(只有黑色和白 色)。求出此颜色的每个矩形的信息...
  • 在上一篇文章的基础上,...同时利用realsense获取目标实际三维坐标。 首先环境设置、主要流程和上一篇一样。这里说一下,最开始的时候我以为读取color_aligned_to_depth,就要在设置数据流的时候,设置color_aligned_to
  • x), int(chg_y)), self.pen_color(), 2*self.pen_times*self.radius, 4) #存储点坐标 self.start_point = (int(chg_x), int(chg_y)) img2 = cv2.cvtColor(self.cur_img, cv2.COLOR_BGR2RGB) QImage = QtGui.QImage...
  • contextcapture中坐标转换的问题

    千次阅读 2018-07-17 16:12:59
    1:如果直接将控制点导入,然后再添加控制点,虽然你照片的坐标系和控制点坐标系 分别 都选对了,但是会出现3D预览视图比例尺问题,说白了就是软件不会进行坐标系转换。并且在导入控制点时,XY不会因为是高斯坐标...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 187,892
精华内容 75,156
关键字:

如何获取控制点坐标

友情链接: TestPcStart.zip