文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

鸿蒙开发游戏（二）---大鱼吃小鱼（摇杆控制）

x: this.centerX - this.radiusMax，我们知道屏幕的起始点是从左上角开始延伸的，组件的起始位置也是从左上角开始的，我们定义的是中心点，所以要减去圆半径，不然的话就偏移了 .justifyContent...当你的手机从红圆点滑动到指定位置时，他的坐标我们可以得到，从而获取手指与圆点的距离，vy，vx，通过tan可以获取到夹角。...通过夹角计算出手指离中心点的距离从而设置摇杆的位置。...1、计算手指的位置 let x = event.touches[0].x; let y = event.touches[0].y; 2、计算手指与中心点的差值 let vx = x - this.centerX...; let vy = y - this.centerY; 3、计算夹角 let angle = Math.atan2(vy, vx) 4、利用夹角计算出手指离中心点的距离 let distance =

17710

我做了一个在线白板（二）

先来看(x1,y1)： 图片 首先我们可以使用Math.atan2函数计算出线段和水平线的夹角A，atan2函数可以计算任意一个点（x, y）和原点（0, 0）的连线与X轴正半轴的夹角大小，我们可以把线段的...;// atan2计算出来为弧度，需要转成角度 那么线段另一侧与X轴的夹角也是A： 图片 已知箭头线段和线段的夹角为30度，那么两者相减就可以计算出箭头线段和X轴的夹角B： let plusDeg =...根据矩形的中心点计算鼠标拖动的角的对角点坐标，比如我们拖动的是矩形的右下角，那么对角点就是左上角； 2.根据鼠标拖动到的实时位置结合对角点坐标，计算出新矩形的中心点坐标； 3.获取鼠标实时坐标经新的中心点反向旋转原始矩形的旋转角度后的坐标...； 4.知道了未旋转时的右下角坐标，以及新的中心点坐标，那么新矩形的左上角坐标、宽、高都可以轻松计算出来； 接下来看一下如何按比例伸缩。...根据之前的逻辑，我们是可以计算出绿色矩形未旋转前的位置和宽高的，那么新的比例也可以计算出来，再根据原始矩形的宽高比例，我们可以计算出红色矩形未旋转前的位置和宽高： 图片 如图所示，我们先计算出实时拖动后的绿色矩形未旋转时的位置和宽高

1.4K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【工程应用九】再谈基于离散夹角余弦相似度指标的形状匹配优化（十六角度量化+指令集加速+目标只有部分在图像内的识别+最小外接矩形识别重叠等）

    一、核心的优化策略 　　通过前面的描述，我们知道，这种方法的得分是通过查表获取的，而且，在大部分的计算中，是没有涉及到浮点计算的，我们通过适当的构造表的内容，可以通过简单的整数类型的加减乘除来得到最后的得分...三、目标只有部分在图像内的识别 　　有些情况下，被识别的目标只有局部在图像范围内，而我们也期望能识别他，这个功能，我知道早期版本的halcon是没有的，他只能识别那些特征点完全在图像内的目标（不是模版图像边缘...那么这里其实也有蛮多的细节和可选方案，我列举如下： 　　1、在创建特征时，计算好每个旋转后的特征的最小外接矩形（勾选了预生成模型数据）。 　　...2、在最后确定的底层金字塔里所有的候选点出计算每个特征点对应的外接矩形。 　　3、只计算底层金字塔0角度是特征单的最小外接矩形，然后其他底层金字塔的最小外接矩形用他旋转得到。 　　...但是，如果按照顺序把0角度的特征点旋转后，得到新的位置信息，一般来说肯定不是按照这样的顺序排列的了，所以访问时随机性就差了一些，那是否我再计算前把这些点再按0角度时那样做个排序后，有利于算法的性能呢，我做了实际的测试

    29610

    我做了一个在线白板！！！

    移动矩形 移动矩形很简单，修改它的x、y即可，首先计算鼠标当前位置和鼠标按下时的位置之差，然后把这个差值加到鼠标按下时那一瞬间的矩形的x、y上作为矩形新的坐标，那么这之前又得来修改一下咱们的矩形模子：...+ or; } } 接下来的问题就是如何计算鼠标移动的角度了，即鼠标按下的位置到鼠标当前移动到的位置经过的角度，两个点本身并不存在啥角度，只有相对一个中心点会形成角度： 这个中心点其实就是矩形的中心点...，上图夹角的计算可以根据这两个点与中心点组成的线段和水平x轴形成的角度之差进行计算： 这两个夹角的正切值等于它们的对边除以邻边，对边和邻边我们都可以计算出来，所以使用反正切函数即可计算出这两个角，最后再计算一下差值即可...它想太多，原因其实很简单： 虚线是矩形没有旋转时的位置，我们点击在了旋转后的边框上，但是我们的点击检测是以矩形没有旋转时进行的，因为矩形虽然旋转了，但是本质上它的x、y坐标并没有变，知道了原因解决就很简单了...3.新的中心点知道了，那么我们就可以把鼠标当前的坐标以新中心点反向旋转元素的角度，即可得到新矩形未旋转时的右下角坐标rp： 4.中心点坐标有了，右下角坐标也有了，那么计算新矩形的x、y、wdith、

    3.6K30

    FPS游戏：方框绘制算法分析

    我们知道自己与敌人的相对(X,Y)距离，可以使用反正切公式求出a角的度数。而我们最终的目的是要求出我们的鼠标指向与敌人之间的夹角b，此时我们可以通过已知的鼠标角度C减去a既可得到b的角度。...如上图：由于(X,Y)(黑色)是已知条件，我们可以通过X比Y求反正切，即可得到a角的度数，然后与90度相加，即可求出敌人当前坐标位置与X轴之间的夹角度数。...第三四象限： 敌人在第三与第四象限与上图差不多，最终目的就是求敌人的位置与X轴之间的夹角，第三象限应该加180度，第四象限加上270度数。这里就不罗嗦了，很简单的东西。...上方的4条象限与特殊情况，如果展开的话一共是8种不同的情况，如下代码就是这八种不同情况，调试下面的这段代码会发现一个缺陷，那就是当我们绕着敌人转圈时，偶尔会出现一个大于180度的角度，这又是两种非常特殊的情况...如上图：摄像机与屏幕之间的夹角统称为视场角，游戏中的准星位置到屏幕的边缘是FOV的一半，以屏幕分辨率1024x768为例，当FOV为90度时，则准心与屏幕的垂线构成45度等腰直角三角形，此时的摄像机到屏幕的距离就是一半屏幕长度

    1.3K20

    android 之旋转罗盘 风车 开发

    不知道能否说明白，还是我画图吧。...ondraw()方法刷新，产生的效果，类似放电影一样 d.view的手势响应 当用户触摸它时会响应onTouch事件，在onTouch里分析手指的坐标，通过坐标算出与圆心的夹角 下图为手指与view中心的夹角...（这里的原点就是view的旋转中心）： 每次手指滑动或是松开都会计算它与原点的夹角，这个方法可以通过反正切函数求出来，详情： /** * 计算以(src_x,src_y)为坐标圆点，建立直角体系，...为了得到瞬时速度，我的思路是通过一个固定长度的2维数组，把手指与原点的最近几次夹角增量和时间点记录下来，通过这几个夹角增量和时间点，可以算出平均速度，因为手指滑动的时候，响应ontouch事件次数非常多...这里用到了一点物理知识： 假如上图为record记录的4组数据，t代表时间点，表示产生这个事件的时间，d代表手指与圆心夹角的增量,它是这次夹角与上次夹角的差值 这样我们可以把t=t3-t0算出经过的时间

    52910

    图形编辑器开发：一些会用到的简单几何算法

    计算旋转后的点是很常见的需求。 常见使用场景： 计算包围盒旋转后的坐标，绘制缩放控制点； 计算光标位置是否落在一个旋转的矩形上，因为旋转的矩形并不是一个正交的矩形，计算出来后判断有点复杂。...常见使用场景： 用于实现图形拾取，判断矩形图形或包围盒是否在光标位置上。...选中多个矩形时，要计算它们组成的大矩形，然后绘制出大选中框。...通过旋转控制点旋转图形时，需要通过向量的点积公式来计算移动的夹角，去更新图形的旋转角度。...计算 [x - cx, y - cy] 和 [0, -1] 两个向量夹角的算法实现： /** * 求向量到右侧轴(x正半轴)的夹角 * 范围在 [0, Math.PI * 2) */ export

    23020

    基于SURF算法相似图像相对位置的寻找

    例如以下两个相似证件的模板，若以其中一幅图像为模板，并给出相应的位置，可以给出其他相似图像进行定位相对应的位置，如下图所示，其中除了标题和样式一样，内容确是不同的，这个时候就可以利用SURF进行特征点匹配...那么，当我们想要计算图片一个区域的积分，就只需计算这个区域的四个顶点在积分图像里的值，便可以通过2步加法和2步减法计算得出，其数学公式如下： ?...高斯拉普拉斯Log探测器的响应值就是在衡量图像的相似性，如下图是一个图像的高斯拉普拉斯变换的三维图和灰度图显示，在图像中的斑点尺寸与高斯拉普拉斯函数的形状趋于一致时，图像的拉普拉斯响应抵达最大。 ?...在计算这个矩形区域时并不是先把它旋转到主方向，而是先计算出每一个点的Harr响应值dx、dy并高斯加权处理后，把dx、dy进行旋转变换，计算公式如下： ?...这里筛选采用两个特征值，如下图所示，每两两特征点之间有个向量，向量与向量的夹角作为一个特征值，向量与向量之间的模比值作为另一个特征值，就可以进行聚类筛选： ? 筛选结果如下所示： ?

    1.8K70

    看完这篇，你也可以实现一个360度全景插件

    Three.js是使用 JavaScript对 WebGL接口进行封装与简化而形成的一个易用的 3D库。...Three.js在一定程度上简化了一些规范和难以理解的概念，对很多 API进行了简化，这大大降低了学习和开发三维效果成本。 下面我们来具体看一下使用 Three.js必须要知道的知识。...最常用的，我们使用距离原点的三个长度（距离 x轴、距离 y轴、距离 z轴）来定义一个位置，这就是直角坐标系。 在判定坐标系时，我们通常使用大拇指、食指和中指，并互为 90度。...四、全景标记 为了让全景图知道，我要把标记标注在什么地方，我需要一个工具来把原图和全景图上的位置关联起来： ?...经度：球面上某店对应的子午面与本初子午面间的夹角。东正西负。 纬度 ：球面上某点的法线（以该店作为切点与球面相切的面的法线）与赤道平面的夹角。北正南负。

    8.8K30

    小姐姐说，我头都被你气大了，怎么办？

    这里为了展示方便，将头部区域的关键点简化为 9 个，其中 8 个点位于头部边缘，一个点位于头部中心位置。...纹理坐标系中计算交点 如上图所示，每个头部边缘关键点和头部中心点确定一条直线，这条直线可以用二元一次方程来表示，它与上述矩形边的交点，可以通过求解二元一次方程得出。...纹理将坐标系转换为渲染坐标系（屏幕坐标系）的对应关系 （x,y）->(2*x-1, 1-2*y) 另外，控制头部变大和变小实际上是，通过控制头部边缘关键点对应顶点坐标的相对位置来实现的，当头部边缘关键点对应的顶点坐标靠近头部中心点时...顶点坐标靠近头部中心点 如上图所示，头部边缘关键点对应的顶点坐标靠近头部中心点，在计算上可以通过点与向量相加来实现。...点与向量相加的几何意义是点按照向量的方向移动一定的距离，该向量可以通过头部中心点坐标减去边缘关键点坐标得出。 移动边缘关键点的函数。

    78021

    【工程应用八】终极的基于形状匹配方案解决（小模型+预生成模型+无效边缘去除+多尺度+各项异性+最小组件尺寸）

    我的做法时全部旋转后，按照坐标进行一次去重的操作，至于重复的留下哪一个，那就看谁排在前面了。  　　第二、我们知道0度的时候的特征是有亚像素这个讲法的，也就是说0度特征的坐标位置可以是亚像素的。...，但是确实可以识别到，就是因为在模版图的特征提取中，边缘那些纯色的部分不含有有效边缘，在处理时把这部分的区域就去除了，给了这些位于边缘之外的目标可被找到的概率。...五、Halcon里的计算相似度的公式和linemod计算式的关系 实际上，linemod里用到的夹角余弦的计算公式和halcon利用的梯度算式的实质是一样的，借用一个网友的贴图：        夹角余弦...六、边缘梯度的计算式里分母的开方和除法是不需要的 　　当我们都做归一化处理时，我们发现边缘梯度的相似度计算其实根本不需要计算分母里的开平方以及整个除法，只需要分子力的两个乘法和一个加法，这个对计算量来说有很大的提升的...针对夹角余弦以及正统的梯度边缘，我分别实现两个不同版本的基于边缘的形状匹配算法，两者似乎也没有太大的性能区别，有兴趣额的朋友可以试下下面的链接：        1、基于梯度边缘的形状匹配。

    80420

    OMAF4CLOUD：启用标准的360°视频创建服务

    基于网络的媒体处理 Multi-Acess Edge Computing （MEC）多访问边缘计算和5G为新服务平台提供了更多的可能。...并且随着云计算的发展，MEC将流量和服务的计算从集中式云移至网络边缘并更靠近客户，从而减少了延迟，并减少了对实时或实时媒体处理的高带宽需求。...其中，视频图片被分为独立的矩形图块，从而可以将图块用作于子图，并在解码器中灵活地将它们混合。6K等矩形方案使用四种不同的视频分辨率：垂直中心区域的分辨率为6K和3K，极地区域的分辨率为3K和1.5K。...在这阶段之后、，用户可以以直观的方式编辑覆盖的位置和相对的深度。设计人员利用Three.JS库来进行可视化。设计完成后，实际处理将在NBMP系统中进行。...他们只需要知道DASH清单的URL就可以开始播放。但是，用有效的内容创建需要预览选项。我们分两步实施了它。首先，Web用户界面可以在覆盖图编辑阶段播放360°视频，从而使用户轻松的看覆盖图的放置位置。

    2.3K00

    CorelDRAW 2019 软件应用项目（五）

    选择对页面居中，就可以得到在镇中心的圆，随机填充一种颜色，并且取消描边，复制这个椭圆，在原地粘贴 如果什么都不按进行缩小，会以图形外八点组成矩形的对角线端点进行缩放，八点中，在边正中四点，会改变图形的长和宽...复制中间，小圆拖拽到边缘备用，复制中间小圆，什么都不按，拖顶点方形，可以沿一角缩放。...它是圆形把手的运动路径，你可以理解为有两个方形颜色产生的渐变围绕着一个方形为圆心，袁心和空心圆把手为半径进行旋转，以至于原本填充的条形渐变经过圆形把手沿路径旋转后形成的中心向外渐变，椭圆虚线界限最远端可达另一个色块和圆形把手处当圆心与另一个色块和圆心与圆型...，把手之间的距离相等，并且两条线夹角为 90 度，就会填充一个正圆渐变。...我们会发现，如果新建一个由中心向外渐变的交互式填充后它默认的两根线夹角为 90 度，默认的就是正圆渐变。 在这里切换回线性渐变填充，调整两色款颜色，内部圆形渐变，也是同样做法。

    1.7K10

    网页CAD二次开发（在线CAD SDK）用到的数学库

    {return Math.hypot(this.x, this.y)};它的方向可以用与 x 轴的夹角来表示，代码如下： v.dir = function() { return Math.atan2(this.y...(x0, y0) 为起点，沿着某个方向画一段长度为 length 的线段，我们只需要构造出如下的一个向量就可以了，代码如下：// dir 是一个向量的方向(与x轴的夹角)， length 是向量的长度...)// 计算两点距离pt1.distanceTo(pt2)// 将three.js 的向量设置成点pt1.setFromVector3(new THREE.Vector3())// 得到点对应的three.js...，参考下图圆弧凸度计算公式自行计算凸度:凸度值就是圆弧的开始点与结束点距离的一半去除以 圆弧的开始点与结束点相连这条线段的中点到圆弧圆心的距离数学库演示效果该demo 基于vue3, 采用tsx的方式,...// 因此，当判断点P在QR的延长线的哪一侧时，使用QR长度的平方来进行比较，以确定点P到线段QR的最短距离。

    8810

    解剖 WebGL & Three.js 工作原理

    四、WebGL的工作流程 4.1、WebGL API 在了解一门新技术前，我们都会先看看它的开发文档或者API。 查看Canvas的绘图API，我们会发现它能画直线、矩形、圆、弧线、贝塞尔曲线。...box.rotation.y = Math.PI/6; 但是，如果我们直接将顶点位置用javascript计算出来，那性能会很低（顶点通常成千上万），而且，这些数据也非常不利于维护。...，我们编写顶点着色器： gl_Position = position * modelMatrix * viewMatrix * projectionMatrix; 这样，我们就在GPU中，将最终顶点位置计算出来了...实际上，上面所有步骤，three.js都帮我们完成了。 5.1.5、three.js顶点处理具体流程 所以有了，多次矩阵计算，多次坐标换算。three.js具体是怎么做的呢？...5.3、three.js完整的运行流程 当我们选择材质后，three.js会根据我们所选的材质，选择对应的顶点着色器和片元着色器。 three.js中已经内置了我们常用着色器。

    9.7K21

    基于SURF算法相似图像相对位置的寻找

    那么，当我们想要计算图片一个区域的积分，就只需计算这个区域的四个顶点在积分图像里的值，便可以通过2步加法和2步减法计算得出，其数学公式如下： ?...高斯拉普拉斯Log探测器的响应值就是在衡量图像的相似性，如下图是一个图像的高斯拉普拉斯变换的三维图和灰度图显示，在图像中的斑点尺寸与高斯拉普拉斯函数的形状趋于一致时，图像的拉普拉斯响应抵达最大。 ?...3、hession矩阵行列式的简化 当我们用sigma = 1.2.的高斯二阶微分滤波，模板尺寸为9X9最小的尺度空间值对图像进行滤波和斑点检测，最终简化式如下，这是SURF论文里面Hession响应值计算公式...在计算这个矩形区域时并不是先把它旋转到主方向，而是先计算出每一个点的Harr响应值dx、dy并高斯加权处理后，把dx、dy进行旋转变换，计算公式如下： ?...这里筛选采用两个特征值，如下图所示，每两两特征点之间有个向量，向量与向量的夹角作为一个特征值，向量与向量之间的模比值作为另一个特征值，就可以进行聚类筛选： ? 筛选结果如下所示： ?

    2K70

    OpenGLES(十)-GLSL案例：矩形、六边形、三角形马赛克OpenGLES(十)-GLSL案例：矩形、六边形、三角形马赛克

    效果图 通过一个给定的六边形把原纹理分割成若干块（一般选择六边形的中心点的纹素）。原理和矩形马赛克是一样的，只是当前像素点隶属的六边形计算会有一些难度。 基本思路 ?...步骤1中的到了当前点隶属的矩形，每个矩形中只有两个顶点是六边形的中心点，所以比较的顶点选取分为四类： (1) IndexX偶数 indexY偶数：选择 左上、右下 (2) IndexX偶数 indexY...步骤2中的到了当前点隶属矩形的顶点，现在要找到当前点隶属于那个六边形,通过图中可以看到红点距离那个六边形的中心点近就隶属于那个六边形。...效果图 实现思路是在六边形马赛克的基础上，把六边形等分为6个三角形。 基本思路 与六边形马赛克一致，找到当前点隶属的六边形中心点。 ?...通过看图发现只要知道当前点和中心点的夹角就可以知道对应的是哪个三角形 float θ = atan((当前点x - 六边形顶点 x)/(当前点y - 六边形顶点 y)) 计算出每一个三角形大致中心点的纹理坐标

    85540

    Three.js基础之变换3D对象 | 《Three.js零基础直通04》

    AxesHelper 将始终显示与x，y和z轴相对应的3个轴向指示，每一个轴向的指示都从场景的中心开始并沿相应的方向延伸。 创建AxesHelper，并将其添加到场景中。...还有一条蓝色的线z轴，不过由于目前它和相机的位置完全对其，所以我们看不见它。 一般情况下，我们不会使用这个轴辅助工具，当我们在三维世界中迷失方向的时候，才会用它来提供视觉辅助。...但是这里面有个坑，当我们同时旋转多个轴时可能会得到一些意想不到的结果。因为，当你旋转x轴时，也会改变其他轴的方向。因而我们可以通过使用reorder(...) 方法对象来更改旋转轴的应用顺序。...不过在本课程中，我们并不会学习quaternion四元数的工作原理，但请记住，当我们更改rotation时，四元数也会更新。我们可以随意使用两者中的任何一个。...当我们再创建新的3D对象时，可以直接将它直接add (...) 到刚刚创建的Group中，而不是将其添加到场景中。

    3.5K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券