展开

关键词

HTML系与鼠事件

HTML系与鼠事件 在开发中处理鼠事件时,经常会碰到 offset、scroll、client 这几个关键字,每次处理页面元素的和偏移前,都要网上去搜资料,还会踩一些坑,影响开发效率。 一、图解HTML的四个系统  HTML有四个常见的系统:screen,page,client和offset,用于描述DOM元素的Box尺寸和MouseEvent中的位置。   document.body.offsetHeight二、图解鼠事件  鼠事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的位置。   (MouseEvent)可以发现:其中包含了许多的,且每个的含义都不一样。 下面我们来挨个介绍常用的,以及它们的含义。  如图所示,假设页面中灰色圆点是鼠点击处,棕色区域是鼠触发事件对象。

18550

OpenGL系及转换

为了使被显示的三维物体数字化,要在被显示的物体所在的空间中定义一个系。这个系的长度单位和轴的方向要适合对被显示物体的描述,这个系称为世界系。世界系是始终固定不变的。 世界系以屏幕中心为原点(0, 0, 0),在OpenGL中用来描述场景的。比如使用这个系来描述物体及光源的位置。世界系,是不会被改变的。 局部系:OpenGL还定义了局部系的概念,所谓局部系,也就是系以物体的中心为原点,物体的旋转或平移等操作都是围绕局部系进行的,这 时,当物体模型进行旋转或平移等操作时,局部系也执行相应的旋转或平移操作 无论是在世界系中进行转换还是在局部系中进行转 换,程序代码是相同的,只是不同的系考虑的转换方式不同罢了。视系:以视点为原点,以视线方向为Z轴正方向的系。 这个轴的方向通常取成平行于屏幕的边缘,原点取在左下角,长度单位常取成一个象素。

1.5K50
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

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

    球心与本地

    1球心(ECEF)与本地(NEU)假如你来到一个陌生城市,你很可能需要问路、通常会告诉你向北走100米,右转,向东走100米,理解起来很直观。 比如前者是局部的平面,而后者是球面。因此,同一个点相对不同的原点,具有不同的相对位置:既是地球上的一个经纬度,又是“出门右转富士康”的这类的位置。 如图,蓝色系就是球心,而绿色系是以球面一点为原点的本地系。准确讲,就是该点对应球的切面和法线组成的空间。? 这自然引出了这个问题:如何从以球心为原点的球面到以球面上任意一点为原点的局部系之间的转换,答案就是矩阵。?系的换算,其实就是原点之间的转换。 如上,假设该经纬度对应的笛卡尔为(XYZ),这就是从球心原点到该点的平移,两者结合得出矩阵的计算公式如下:?公式有了,我们把复杂的空间几何问题转为数值计算,便于抽象理解和计算机的处理。

    70260

    系与矩阵(4):球心与NEU

    如上图,模拟了一个以球心为原点的固定系,该系有一个名称地心地固系(ECEF),对应我们之前介绍的系? ,而平面场景在我们生活中更为直观,上北下南,左东右西,对应上图中绿色的切平面,简称NEU系,对应之前介绍的系?。于是,给定一点?,我们需要计算一个矩阵?,实现两个系的转换。 这里对应两个环节,(1)球心系的单位换算, 从经纬度?到米单位的笛卡尔?;(2)从ECEF到NEU,从全球系?到本地系?。?整体来看,默认初始时?,从F到M大概需要三个过程:(1)沿? ,方向均向内;(2)沿着新系中的红轴逆时针旋转?;(3)沿新系的?方向平移到绿色系的原点。前两个旋转矩阵对应的是:?这样,只要知道平移?对应的三个分量,可以轻松的得到最终的矩阵。 ,因此,我们可以获取ENU系三个轴的向量?,这样,对应的转换公式为:?这样,我们在ENU本地系上的一点?,对应球心系上的点?,满足:?

    18420

    前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作

    初步想法是将一个与Canvas图像大小差不多的div覆盖在其上,在拖拽div时将获取的光修正后传给Canvas绘制函数并刷新图像的位置。 当点击时,记录下光div上的位置。mwidth和mheight表示光落点相对于div左边和上边的距离。如果不加修正:?这就是不加修正的结果,当光点下时,div即左上角会与光一致。 点击时光总会“粘”在div某点上。接下来绘制图片:首先定义全局变量X和Y,它们是为了实时更新图像的绘制。 同时别忘了clearRect,当图片移动到下一个位置时,清除上一个位置的图片,参数为Canvas画布的和尺寸。 在拖拽时将修正后的光传给X、Y:X=moveEvent.clientX-mwidth; Y=moveEvent.clientY-mheight;?

    56480

    前端游戏编程基础-如何实现Canvas图像的拖拽、点击等操作

    初步想法是将一个与Canvas图像大小差不多的div覆盖在其上,在拖拽div时将获取的光修正后传给Canvas绘制函数并刷新图像的位置。 当点击时,记录下光div上的位置。mwidth和mheight表示光落点相对于div左边和上边的距离。如果不加修正:?这就是不加修正的结果,当光点下时,div即左上角会与光一致。 点击时光总会“粘”在div某点上。接下来绘制图片:首先定义全局变量X和Y,它们是为了实时更新图像的绘制。 同时别忘了clearRect,当图片移动到下一个位置时,清除上一个位置的图片,参数为Canvas画布的和尺寸。 在拖拽时将修正后的光传给X、Y:X=moveEvent.clientX-mwidth; Y=moveEvent.clientY-mheight;?

    66170

    JavaScript 进阶教程(2)---面向对象实战之贪吃蛇小游戏

    ; 小蛇的头的 var headX = this.snake.body.x; var headY = this.snake.body.y; 横 if (headX < 0 || headX 判断有没有吃到食物 小蛇头的和食物的一致则吃到食物 var headX = this.body.x * this.width; var headY = this.body.y * this.height ; 判断小蛇头的和食物的是否相同 if (headX == food.x && headY == food.y) { 获取小蛇的最后的尾巴 var last = this.body; 把最后的蛇尾复制一个 var headX = this.body.x * this.width; var headY = this.body.y * this.height; 判断小蛇头的和食物的是否相同 if ; 小蛇的头的 var headX = this.snake.body.x; var headY = this.snake.body.y; 横 if (headX < 0 || headX

    23152

    工作中碰到的js问题(disabled表单元素不能提交到服务器)

    今天碰到一个奇葩的问题,asp页面表单提交后,有一个文本框在后台获取不了,这个签在form表单内,也有name属性,但是在后台就是获取不了这个签的值,而其他的文本框、复选框都可以获取到,这可就奇怪了 区域,需要做到点击这个div区域外的其他地方,关闭这个div区域。 所以需要做到获取鼠,然后根据位置和这个div的位置来隐藏:监听鼠点击document.onmousedown = function (event) { var xPos, yPos; 鼠 距离左边的位置 var width = obj.offsetWidth;    该div的宽度 var height = obj.offsetHeight;  该div的高度               判断鼠是否在div区域之内(在div区域内,就不隐藏该div) if (xPos >= left && xPos = top && yPos

    34220

    第77天:jQuery事件绑定触发

    一、元素操作1、 高度和宽度 $(“div”).height(); 高度$(“div”).width(); 宽度.height()方法和.css(“height”)的区别:返回值不同,.height ()方法返回的是 数字类型(20),.css(“height”)返回的是字符串类型(20px),因此.height()方法常用在参与数学计算的时候2、值$(“div”).offset(); 获取或设置值 设置值后变成相对定位$(“div”).position(); 获取值 子绝父相 只能读取不能设置3、滚动条(滚动事件)$(“div”).scrollTop(); 相对于滚动条顶部的偏移$(“div click”,function(){});on: $node.on(“click”,”p”,function(){});2、 解绑unbind、undelegateoff3、触发click : $(“div

    15430

    前端基础-CSS背景属性

    取值: left: 设置左边为渐变起点的横值。 right: 设置右边为渐变起点的横值。 top: 设置顶部为渐变起点的纵值。 bottom: 设置底部为渐变起点的纵值。 取值: ①: 用百分比指定径向渐变圆心的横值。可以为负值。 ①: 用长度值指定径向渐变圆心的横值。可以为负值。 left: 设置左边为径向渐变圆心的横值。 center①: 设置中间为径向渐变圆心的横值。 right: 设置右边为径向渐变圆心的横值。 ②: 用百分比指定径向渐变圆心的纵值。可以为负值。 ②: 用长度值指定径向渐变圆心的纵值。可以为负值。 top: 设置顶部为径向渐变圆心的纵值。 center②: 设置中间为径向渐变圆心的纵值。 bottom: 设置底部为径向渐变圆心的纵值。 : 指定渐变的起止颜色。 circle: 指定圆形的径向渐变 ellipse: 指定椭圆形的径向渐变。

    16110

    JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试

    ”的x是0,y是85px? 当我把鼠移到div的右上角的时候,clientX为200,clientY为0;screenX为200,screenY为85,由此可知道clientX是鼠相对以浏览器有效区域的的X轴,clientY 是鼠相对以浏览器有效区域的的Y轴,上图中我的鼠在浏览器有效区域里 的x是200px,y是0;而screenX,screenY则是相对以整个显示屏幕区域而言的。 当我的鼠移动到div的右下角的时候,screeX是200px,screenY是185px,因为div本身的宽度我定义的时200px,高度100px;接下来说一说offsetX和offsetY属性offsetX 第一次鼠是在接近test按钮的左上角点击??相信看到这里应该能明白offsetX和offsetY是获取的什么值了吧,获取的就是鼠相对test这个按钮的x和y

    31440

    threejs三维模型添加文字签,及添加文字的方式介绍

    上次在文章ThreeJS中三维世界转换成二维屏幕介绍了三维二维的转换方法,今天结合一个用例具体说下用法。 在三维模型场景展示中,经常会需要对各个模型加上文字签,而无论三维场景如果旋转变换一般文字签总是需要面向摄像机方向,这时候代表深度的z失去作用,只需用到x,y。 这时候需要把三维转换为基于屏幕上的二维。三维模型上加文字签最常用的方法应该就是(DOM + CSS)基于传统html5的文字实现,用于添加描述性叠加文字的方法。 然后计算三维对应的二维,根据二维去设置DIV的left和top属性,让DIV在需要的位置进行展示。这种方式实现简单,DIV可方便使用页面CSS效果进行UI设置。 ;padding: 10px;background: rgba(255, 255, 255, 0.8);line-height: 1;border-radius: 5px;}在OnRender方法中写系转换代码

    2.1K30

    屏幕与客户的区别

    屏幕是相对于屏幕左上角(0,0)位置的,客户是相对于某个窗口客户区左上角的,当谈到客户时需要说明是相对哪个窗口的客户。? 如上图,点A(屏幕左上角),点B(应用主窗口客户区左上角),控件1的C点的屏幕和客户是不同的,屏幕是相对于A点(50,100),客户(相对于父窗口)是相对于B点(20,50)。 Windows有五个API跟屏幕、客户有关,要注意区分。 第三,ScreenToClient(HWND, LPPOINT) 将屏幕转换为相对于指定窗口的客户。 第四,ClientToScreen(HWND, LPPOINT) 将相对于指定窗口的客户转换为屏幕

    58930

    touch实现js拖拽

    Document *{padding: 0px;margin: 0px;} div { width: 10rem; height: 10rem; background: black; } var div =document.querySelector(div); console.log(div.offsetWidth,div.offsetHeight); 注意点,在html上设置font-size是rem 例如start的时候div在100,100,鼠在150 150的地点,move的时候在300 300,鼠在350 350 的位置. 第二:那么 ?? start的时候第一个图片的结果代表div的边缘到鼠的距离.(开始的时候) move的时候第二个图片的结果代表div边缘到可视区的距离.(移动后的) 最终达到了拖拽的目的. 核心:开始是开始的xy,移动是移动的xy.

    28051

    Python验证码截取识别代码实例

    :return: driver.save_screenshot(code.png) element = driver.find_element_by_xpath(coderddr) # 获取验证码的div + element.size + int(2) img = Image.open(code.png) imgcod = img.crop((left,top,right,bottom)) # 根据 div aucthcode(*p) driver.quit() # img = Image.open(code.png) # imgcod = img.crop((1392,393,1490,425)) # 根据 div 的长宽截图 # imgcod.save(aucthcodeN.png)注:代码中的验证码截取,不一定是准的,我是通过获取元素的为基础参数,然后在main里面进行调试最终得到我适用的运行效果展示

    37540

    发布一个锁定行列的一种方法。(实现Excel里的冻结窗格的功能)

    (当然要在div里的内容超出div设置的时候)。 这样div里的table 就可滚动了。但是行和列也以一起跟着动了起来。 2、行和列如何“锁定”呢?这里我用了一个笨招,用三个div来分别放置行和列,以及行列交叉的地方。这样看起来就像是别锁定住了。 2、适用范围比较广:针对生成的 签,而不针对服务器控件,所以DataGrd、GridView、DataList等都可以使用,只要输出的是 table 形式的html代码就可以。          dMain.style.display = none;          寻找Top 和 Left     var tt = dMain;                寻找左上角的 ttop+thei : ttop+thei+;    左上角的     var myLeft = tleft;                                        左上角的

    1.4K60

    CSS:你真的会用 z-index 吗?

    HTML 元素是处于三维空间中 所有的盒模型元素都处于三维系中,除了我们常用的横和纵,盒模型元素还可以沿着“z 轴”层叠摆放,当他们相互覆盖时,z 轴顺序就变得十分重要。 b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-align: center; } .static 50px; } #abs2 { top: 10px; right: 10px; } #sta1 { background-color: #ffc; margin: 0px 50px 0px 50px; } DIV #1position: absolute; DIV #2position: relative; DIV #3position: relative; DIV #4position: absolute; DIV #5position: static; ?

    22610

    移动端触屏事件

    因为平时我们都是给元素注册触摸事件,所以重点记住 targetTocuhes 3.案例:移动端拖动元素 touchstart、touchmove、touchend可以实现拖动元素 但是拖动元素需要当前手指的值 然后用盒子原来的位置 + 手指移动的距离 手指移动的距离:  手指滑动中的位置 减去  手指刚开始触摸的位置 拖动元素三步曲: (1) 触摸元素 touchstart: 获取手指初始,同时获得盒子原来的位置 = document.querySelector(div); var startX = 0; 手指初始 var startY = 0; var x = 0; 元素初始位置 var y = 0; div.addEventListener div.offsetLeft; y = div.offsetTop; }); div.addEventListener(touchmove, function (e) { 计算手指移动距离 手指移动之后的减去初始 var moveX = e.targetTouches.pageX - startX; var moveY = e.targetTouches.pageY - startY; 元素移动距离 元素初始加上手指移动距离

    34930

    映射

    建立等参单元,需要另外一个自然系下的参考单元。 对于物理系下的任意一点,在自然系下的参考单元中,有唯一的一个点与之对应;反过来对于自然系下参考单元的任意一点,在物理系下的单元中,有唯一的一个点与之对应。? 设点P(x,y)是物理单元的任意一点,变量x用自然系可表示为,?这种映射关系是基于C0连续。写成矩阵形式:?α1、α2、α3、α4为待定参数。 同理,变量y也有这种映射关系:?现在来验证这种映射关系,参考单元的中心点(0,0),即当ξ=0,η=0时,变量分别为?这个点正好是物理单元的中心点。 参考单元的结点3(1,1),即当ξ=1,η=1时,变量分别为?这个点正好是物理单元的结点3。

    62040

    地图

    , 目前GPS定位所得出的结果都属于WGS84系统,WGS84基准面采用WGS84椭球体,它是一地心系,即以地心作为椭球体中心的系。 取中央子午线与赤道交点的投影为原点,中央子午线的投影为纵x轴,赤道的投影为横y轴,构成高斯克吕格平面直角系。     纵以赤道为零起算,赤道以北为正,以南为负。我国位于北半球,纵均为正值。 横如以中央经线为零起算,中央经线以东为正,以西为负,横出现负值,使用不便,故规定将纵轴西移500公里当作起始轴,凡是带内的横值均加 500公里。 由于高斯-克吕格投影每一个投影带的都是对本带原点的相对值,所以各带的完全相同,为了区别某一系统属于哪一带,在横轴前加上带号,如(4231898m,21655933m),其中21即为带号

    339100

    相关产品

    • 智能识图

      智能识图

      智能识图(IIR)为您提供微信同款、全品类、高精度、低门槛的商品识别服务。智能识图由腾讯云与微信联合打造,利用人工智能算法,可以快速、准确识别图片中的主体物品,并输出主体坐标。基于大量商品图片训练模型、数亿商品图片库检索,能够识别出商品的具体品牌、名称、型号或款式,并输出价格、介绍等内容。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券