随笔分类 - 计算机图形学
摘要:我们拿下图中的沿着线段轨迹移动的原点来举例,怎么来实现这个动画! 1)定义路径集合Path,里面规定关键坐标点如startPoint和endPoint,设置从startPoint移动到endPoint的时间duration。 如下json对象,我们有6段路径,分别进行了定义。我们将下面这个列表集合命
阅读全文
摘要:效果结尾处可验收。 画线准备 准备一个canvas <canvas id="canvasId" width="1000" height="800"></canvas> 使用pointer事件监听,落笔,拖拽,收笔。 document.onpointerdown = function (e) { if
阅读全文
摘要:canvas的主要功能就是用来绘制内容,有时候为了给用户流畅的视觉感受,需要绘制的频率要求很高,这样对绘制的性能就有要求,那么怎么才能写出高性能的绘制代码呢。 尽可能少调用api 例如我们绘制一段线条,如果用如下代码的话,每移动一次就stroke一次: 1 for (var i = 0; i < p
阅读全文
摘要:我们的项目是面向学校老师的教学软件,所以肯定少不了互动白板的功能,而这个里面的画笔功能是由我来开发的,下面介绍这个过程中遇到的问题以及解决方法。 首先给大家明确下由于软件中的画布可以自由移动,会超出屏幕显示范围,同时支持点擦和线擦,所以需要存储所有点坐标。 第一版简单画笔实现并优化掉折线感 第一版实
阅读全文
摘要:1、向量的定义 在数学中,向量(也称为矢量),指具有大小和方向的量。它可以形象化地表示为带箭头的线段。 箭头所指:代表向量的方向; 线段长度:代表向量的大小。 2、向量的点乘 向量点乘的数学定义: 向量点乘的几何意义: 向量的点乘可以用来计算两个向量之间的夹角,进一步判断这两个向量是否正交(垂直)等
阅读全文
摘要:假如有点 A (x1,y1) 、B (x2,y2)、C (x3,y3)计算他们的斜率 k = (y1-y2)/(x1-x2); 但是, x1如果和 x2 相等,则 k为无穷大,所以,我们代码里面,一般用数组k = [ y1-y2 , x1-x2 ]令 a = y1 - y2; b = x1 - x2
阅读全文
摘要:杨辉三角与排列组合数 杨辉三角是二项式系数在三角形中的一种几何排列 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1特点: 一个数等于上面两个数相加。第m行n列的值(m,n从0开始)等于根据这个特点,可以统计的所有值,并存入一个二维数组中,为你所用,该数组形如: 1 0 0 0 01
阅读全文
摘要:本文目的: 现在有一条二次贝塞尔曲线,控制点坐标分别为:P0(3,8),P1(2,3),P2(2,7),如果想要返回 10 个在贝塞尔曲线上的点,可以理解为将该曲线分成10端(实际是11个点组成,不过我们的逻辑是返回除最后一个点外的10个点) 如果想对贝塞尔曲线有更深入的理解,可以学习这篇文章:贝塞
阅读全文
摘要:判断是否在矩形内: 只需要判断该点是否在上下两条边和左右两条边之间就行。 判断一个点是否在两条线段之间夹着就转化成,判断一个点是否在某条线段的一边上,就可以利用叉乘的方向性,来判断夹角是否超过了180度 如下图 只要判断(AB X AE ) * (CDX CE) >= 0 就说明E在AD和BC中间夹
阅读全文