html矢量图 对画布的拖拽,原生WebGL如何使用鼠标拖拽画布？-程序员宅基地
技术标签： html矢量图 对画布的拖拽
如图，我在实现鼠标拖拽画布这个功能时拖拽动作非常不平滑，请问有没有更好的方式用原生WebGL来实现鼠标拖拽画布功能？
拖拽部分代码：gl.canvas.onmousedown = function (ed) {
//鼠标点击时鼠标距离浏览器左边的距离
const rect1 = ed.target.getBoundingClientRect();
let {ma, mb} = canvasToWebGL({x: ed.clientX, y: ed.clientY}, {top: rect1.top, left: rect1.left}, gl);
// let ma = ed.clientX,mb = ed.clientY;
gl.canvas.onmousemove = function (em) {
gl.canvas.style.cursor = 'grabbing'
const rect2 = em.target.getBoundingClientRect();
let {x, y} = canvasToWebGL({x: em.clientX, y: em.clientY}, {top: rect2.top, left: rect2.left}, gl);
//canvas元素左边距离浏览器屏幕左边的距离
// let x = em.clientX, y = em.clientY;
if (ma - x > 0) {
gl.offsetX -= gl.tran_step
} else {
gl.offsetX += gl.tran_step
}
if (mb - y > 0) {
gl.offsetY -= gl.tran_step
} else {
gl.offsetY += gl.tran_step
}
// gl.translation_matrix = translation(x-ma,y-mb,0)
// console.log(gl.translation_matrix)
draw(gl);
ma = x;
mb = y;
}
gl.canvas.onmouseup = function () {
gl.canvas.style.cursor = 'default'
gl.canvas.onmousemove = null;
gl.canvas.onmouseup = null;
}
}
智能推荐
链路追踪php,easyswoole链路追踪-程序员宅基地
文章浏览阅读543次。TrackerEasyswoole提供了一个基础的追踪组件，方便用户实现基础的服务器状态监控，与调用链记录。组件要求php: >=7.1.0ext-swoole: ^4.4.0easyswoole/component: ^2.0安装方法composer require easyswoole/tracker仓库地址调用链Easyswoole的调用链跟踪是一个以类似有序的树状链表的解构实现的，解..._php 链路追踪
【云计算概念】IaaS、PaaS、SaaS、CaaS、MaaS的区别-程序员宅基地
文章浏览阅读2.8k次，点赞2次，收藏3次。五者之间主要的区别在于第一个单词，而都是（即服务）的意思，这五者都是云计算的落地产品。
下班的时候在电梯里碰见个妹子，问这层楼是哪个部门的。我答技术部吧。她惊异:技术部也这么晚下班？妹子，你听说过科比和程序员的故事么？-程序员宅基地
文章浏览阅读1.4k次。下班的时候在电梯里碰见个妹子，问这层楼是哪个部门的。我答技术部吧。她惊异:技术部也这么晚下班？妹子，你听说过科比和程序员的故事么？转自:程序猿才懂得笑话 http://cxmonkey.duapp.com/?p=222
【0day】复现用友 NC NCFindWeb大型企业数字化平台log4j远程代码执行漏洞-程序员宅基地
文章浏览阅读220次。NC是一款企业级ERP软件。作为一种信息化管理工具，用友NC提供了一系列业务管理模块，包括财务会计、采购管理、销售管理、物料管理、生产计划和人力资源管理等，帮助企业实现数字化转型和高效管理。用友 NC NCFindWeb大型企业数字化平台存在log4j远程代码执行漏洞，攻击者可以在恶意环境变量中插入特定的代码，使得Log4j执行该代码。_用友 nc ncfindweb大型企业数字化平台log4j远程代码执行漏洞
MySQL数据库分卷备份还原类_sql数据库分卷备份和还原-程序员宅基地
文章浏览阅读101次。执行数据库恢复是DBA的日常生活的一部分。一个DBA可能需要执行恢复由于种种原因，如恢复，刷新数据库用于测试目的等许多倍，它可能很难执行恢复由于损坏的媒体，在服务器上的磁盘空间不足等。在这篇文章中，我将概述的方法之一，我用来恢复的备份生产数据库的方案夫妇的日子，我的支持团队的成员来找我，说他们是无法刷新农行从生产服务器相同的的备份副本名为OLTP开发环境数据库。从生产服务器的备份副本大约75 GB...
Hi3516A开发--编译内核、uboot_hi3516a_sdk_v1.0.5.0.tgz-程序员宅基地
文章浏览阅读1.5w次，点赞4次，收藏20次。有两种编译方式一、整个编译(1)编译整个osdrv目录：make OSDRV_CROSS=arm-hisiv300-linux all或者make OSDRV_CROSS=arm-hisiv400-linux all/* 如果单板使用spi接口nand flash作为存储介质，请在编译整个目录时传入如下FLASH_TYPE参数 */make OSDRV_CROSS=_hi3516a_sdk_v1.0.5.0.tgz
随便推点
SHA算法系列介绍-程序员宅基地
文章浏览阅读1.8w次，点赞8次，收藏27次。我们先来回顾一下MD5算法的核心过程，简而言之，MD5把128bit的信息摘要分成A，B，C，D四段（Words），每段32bit，在循环过程中交替运算A，B，C，D，最终组成128bit的摘要结果。老师：SHA-2的子版本包括SHA-224,SHA-256,SHA-384,SHA-512。再看一下SHA-1算法，核心过程大同小异，主要的不同点是把160bit的信息摘要分成了A，B，C，D，E五段。再看一下SHA-2系列算法，核心过程更复杂一些，把信息摘要分成了A，B，C，D，E，F，G，H八段。_sha算法
ADC模数转换-基于STM32F407-独立模式-单通道中断模式-配置_stm32f407 单通道adc 库函数-程序员宅基地
文章浏览阅读642次。// ADC GPIO 宏定义#define RHEOSTAT_ADC_GPIO_PORT GPIOB#define RHEOSTAT_ADC_GPIO_PIN GPIO_Pin_0#define RHEOSTAT_ADC_GPIO_CLK RCC_AHB1Periph_GPIOB// ADC 序号宏定义#define RHEOSTAT_ADC ADC1#define RHEOSTAT_ADC_CLK RCC_APB2Peri._stm32f407 单通道adc 库函数
小波变换：小波基函数_小波变换dbn-程序员宅基地
文章浏览阅读4.9k次。与标准的傅里叶变换相比，小波分析中使用到的小波函数具有不唯一性，即小波函数具有多样性。小波分析在工程应用中，一个十分重要的问题就是最优小波基的选择问题，因为用不同的小波基分析同一个问题会产生不同的结果。目前我们主要是通过用小波分析方法处理信号的结果与理论结果的误差来判定小波基的好坏，由此决定小波基。常用小波基有Haar 小波、Daubechies(dbN) 小波、Mexican Hat(mexh) 小波、Morlet 小波、Meyer 小波等。..._小波变换dbn
C# 实现单线程异步互斥锁_c#异步线程互锁执行-程序员宅基地
文章浏览阅读867次，点赞12次，收藏11次。C#对异步的支持越来越成熟，async、await简化了代码也提高了可读性，但由于在一段上下文中有了异步操作，意味着这段操作可能会被同时重复调用，如果本身没有被设计可以重复调用的情况下，就很可能会出问题。以上就是今天要讲的内容，本文简单的实现了单线程的异步互斥锁，实现起来相对简单，但作用还是比较大的。虽然说有些情况的异步是可以在前期设计上避免同时调用，比如登录按钮点击后出现蒙板不允许再次点击，但是对于已存在的代码出现了同时调用问题，此时有互斥锁则可以避免大范围改动代码，有效解决问题。_c#异步线程互锁执行
【vue-treeselect+vxe-table】数据量大的时候懒加载，数据回显，输入框绑值，末级节点不要前面的箭头等问题详解_treeselect显示加载中-程序员宅基地
文章浏览阅读3.7k次，点赞3次，收藏6次。10、vxe-table的default插槽是默认插槽，刚渲染的列表默认是span标签包裹变量，可编辑表格有个特点，就是你鼠标点击行的时候才会出现输入框或下拉框之类的，当你鼠标离开后就会变成纯展示的，所以会有一个动态的效果，我这里要保持一致，不要这种效果，所以默认和可编辑的时候都是一样的组件。选完节点并回显后，调保存接口，把数据传给后端，然后就完成了，我们调详情接口回显也是可以正常回显的，因为上面文本框的插槽绑的已经是scope.row.字段的值，相当于自己自定义的值后端已经保存了。..._treeselect显示加载中
【从0入门JVM】-01Java代码怎么运行的_代码如何在jvm中运行-程序员宅基地
文章浏览阅读144次。在深入学习JVM之前，我们需要先了解java程序是如何运行的这是JVM执行代码的一个过程下面分以下几点 介绍Java代码的运行过程。_代码如何在jvm中运行