精华内容
下载资源
问答
  • 在canvas的使用中,经常会用到鼠标进行交互,但是在交互的过程中难免会遇到一些...可见,得到的坐标并非是期望中的(0, 0)或者是和(0, 0)相近的值,这是由于鼠标事件是以document的左上角为原点获取坐标的,因此...

    在canvas的使用中,经常会用到鼠标进行交互,但是在交互的过程中难免会遇到一些问题,例如,对于一个居中显示的画布,如图所示
    图1
    众所周知,canvas的绘制过程中,是以画布的左上顶点为原点进行绘制,假如此时使用鼠标点击事件获取画布左上顶点的坐标,得到的结果为
    图2
    可见,得到的坐标并非是期望中的(0, 0)或者是和(0, 0)相近的值,这是由于鼠标事件是以document的左上角为原点获取坐标的,因此,为了便于canvas和鼠标的交互,需要对坐标进行转换。

    考虑canvas中的一个点基于document的坐标(x, y),由文档结构知,假设canvas距离左边缘和上边缘的距离分别为left, top,此点基于canvas的坐标值应当为(x - left, y - top)

    代码的实现过程中,需要使用到canvas.getBoundingclientRect()这个函数

    var canvasBound = canvas.getBoundingClientRect()
    canvas.onmousedown = function(e){
    	console.log((e.clientX-canvasBound.left) + " , " + (e.clientY-canvasBound.top));
    }
    

    此时,点击canvas左上角,得到的坐标为
    图3
    可见,此时的坐标近似为(0, 0)点,至此,坐标转换完成

    完整代码

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>坐标转换</title>
        <style>
        	#canvas{
        		border: 1px solid #000000;
        		display:block;
        		margin:0 auto;
        	}
        </style>
    </head>
    <body>
    
        <canvas id="canvas">
        </canvas>
    
        <script>
        	window.onload = function(){
    			var canvas = document.getElementById("canvas");
    			canvas.width = 400;
    			canvas.height = 400;
    			var context = canvas.getContext("2d");	
    			
    			
    			var canvasBound = canvas.getBoundingClientRect()
    			canvas.onmousedown = function(e){
    				console.log((e.clientX-canvasBound.left) + " , " + (e.clientY-canvasBound.top));
    			}
    			
    		}
        </script>
    </body>
    </html>
    

    如果在工程中使用坐标转换,可以将坐标转换封装在函数中,便于重复使用

    function coordinateTrans( x , y ){
       	var canvasBound = canvas.getBoundingClientRect()
       	return {x:(x-canvasBound.left) , y:(y-canvasBound.top)}
    }
    
    展开全文
  • 屏幕坐标获取想(x,y) getLocationOnScreen  计算该视图在全局坐标系中的x,y值,(注意这个值是要从屏幕顶端算起,也就是包括了通知栏的高度)//获取在当前屏幕内的绝对坐标  getLocationInWindow  计算...

    屏幕坐标获取想(x,y)

    getLocationOnScreen 
    计算该视图在全局坐标系中的x,y值,(注意这个值是要从屏幕顶端算起,也就是包括了通知栏的高度)//获取在当前屏幕内的绝对坐标 
    getLocationInWindow 
    计算该视图在它所在的widnow的坐标x,y值,//获取在整个窗口内的绝对坐标

    getLeft , getTop, getBottom, getRight, 
    这一组是获取相对在它父亲里的坐标
    int[] location = new  int[2] ;
    view.getLocationInWindow(location); 
    //获取在当前窗口内的绝对坐标,当前activity显示的大小
    view.getLocationOnScreen(location);
    //获取在整个屏幕内的绝对坐标,包括通知栏
    location [0]--->x坐标,location [1]--->y坐标

    我相信看了下面的图,你就会更加清楚的理解了。



    涉及到的方法一共有下面几个:


    view获取自身坐标:getLeft(),getTop(),getRight(),getBottom()    相对于父控件的距离


    view获取自身宽高:getHeight(),getWidth()         高度=getbottom-gettop      宽度=getright - getLeft()


    motionEvent获取坐标:getX(),getY(),   相对于父控件的坐标         getRawX(),getRawY() 相对于屏幕的坐标


    首先是view的几个方法:


    获取自身的宽高的这两个方法很清楚,不用多说,获取坐标的这几个就有点混乱了。


    根据上面的图应该会比较容易明白,图中屏幕上放了一个ViewGroup布局,里面有个View控件


    getTop:获取到的,是view自身的顶边到其父布局顶边的距离


    getLeft:获取到的,是view自身的左边到其父布局左边的距离


    getRight:获取到的,是view自身的右边到其父布局左边的距离


    getBottom:获取到的,是view自身的底边到其父布局顶边的距离


     


    然后是motionEvent的方法:


    getX():获取点击事件相对控件左边的x轴坐标,即点击事件距离控件左边的距离


    getY():获取点击事件相对控件顶边的y轴坐标,即点击事件距离控件顶边的距离


    getRawX():获取点击事件相对整个屏幕左边的x轴坐标,即点击事件距离整个屏幕左边的距离


    getRawY():获取点击事件相对整个屏幕顶边的y轴坐标,即点击事件距离整个屏幕顶边的距离


    展开全文
  • 屏幕适配屏幕适配应当指内容 适配区 和 屏幕区 间的适配关系。单屏适配有 contain、cover 或 fill,多屏常见是 依宽 。contain 和 cover 还需要 定位 来处理留白和超出的内容。而同一个 H5 里不同内容往往用不同适配...

    设计大大,这次真的是 "按设计稿来" 了,因为现在,任何机子都是设计稿标准机! 开发同学,这下你就直接读设计稿标注就好了啦!

    屏幕适配

    屏幕适配应当指内容 适配区 和 屏幕区 间的适配关系。

    单屏适配有 contain、cover 或 fill,多屏常见是 依宽 。

    contain 和 cover 还需要 定位 来处理留白和超出的内容。

    而同一个 H5 里不同内容往往用不同适配方式,即 分层。

    bV5NQp?w=1250&h=507

    bV5NQs?w=2614&h=879

    优选 CSS

    页面加载后 js 往往需要延时至少 70ms 才能获取正确的 webview 宽高

    css 往往最先执行,且 cssom 的解析往往和 dom 在最开始并行构建

    js 会等待 dom 和 cssom 处理完后才能执行,而 css 只需等待 dom

    相比 js 在切换横竖屏时要切换 2 次进程来重绘,css 无需切换

    对于屏幕适配这类表现问题,能用 css 实现就应该用 css 实现。

    整层适配

    为确保各层元素同步缩放,不走样,每层的 适配区 应当等于设计稿大小。

    直接的实现就是构造和 适配区 一样尺寸的 容器, 整层适配。

    容器 内可以有若干个相同适配方式的 元素。

    以 svg 实现为例:

    .layer {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    }

    实际效果:

    bV5NQu?w=384&h=776

    整层适配 实现简单,开发时直接读取设计稿值,可以满足大部分静态页面需求。

    但在 h5 动画多的时候,就得考虑动画流畅,页面性能了。

    用可替换元素如 等做 容器,以及用背景图做 元素 的,

    在应用 css 动画时有性能缺陷:

    对 容器 内 元素 应用 css 动画会造成频繁重排和重绘,导致卡顿。

    将和 适配区 尺寸相同的 容器 提升为合成层时所占内存过大,有多少层内存就翻多少倍。

    为这些实现方案提升性能就要针对 容器 动画,并减小 容器 的尺寸,最好是和一层里所有 元素 的最小总面积相等,做到 精简适配

    精简适配

    bV5NQw?w=1485&h=513

    公式

    设计稿

    宽 v

    高 g

    适配前元素

    横坐标 x

    纵坐标 y

    宽 w

    高 h

    适配后容器

    横坐标 x3 = x*u/v

    纵坐标 y3 = y*f/g

    适配后元素

    横坐标 x4 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1

    纵坐标 y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1

    宽 w3 = (w/v)*u

    高 h3 = (h/g)*f

    当 contain 方式适配时

    缩放值 s = Math.min(f/g, u/v)

    横向左留白占总留白 o = (m*v - x)/w

    纵向上留白占总留白 p = (n*g - y)/h

    当 cover 方式适配时

    缩放值 s = Math.max(f/g, u/v)

    横向左超出占总超出 o = (x - m*v)/w

    纵向上超出占总超出 p = (y - n*g)/h

    适配区

    垂直居顶时 m = 0

    垂直居中时 m = .5

    垂直居底时 m = 1

    水平居左时 n = 0

    水平居中时 n = .5

    水平居右时 n = 1

    相比整层适配内存优化 (w3*h3)/(v1*g1) >= w*h/(v*g)

    实现示例

    当设 max-width 为 w/v,max-height 为 h/g 时对应 contain 适配。

    当设 min-width 为 w/v,min-height 为 h/g 时对应 cover 适配。

    当设 width 为 w/v,height 为 h/g 时表示 fill 适配。

    contain 适配时,如果图片原始尺寸小于 max-width 和 max-height 时,用 zoom: 10 放大或者直接修改图片原始尺寸。

    cover 适配时,如果图片原始尺寸大于 min-width 和 min-height 时,用 zoom: .1 缩小或者直接修改图片原始尺寸。

    因 top left 中百分比是相对屏幕宽 u 和高 f 的,对应 m*u 和 n*f

    因 transform 中百分比是相对适配后元素宽 w1 和高 h1 的,对应 (m*v + x)/w*w1 和 (n*f + y)/h*h1

    img {

    /* min-width 和 min-height 构成了虚拟的容器 */

    min-width: 50.37037037037037%; /* w3 = (w/v)*u 其中 w = 544,v = 1080 */

    min-height: 7.395833333333333%; /* h3 = (h/g)*f 其中 h = 142,g = 1920 */

    zoom: .1;

    /* x4 = m*u + (x - m*v)/w*w1 */

    /* y4 = n*f + (y - n*g)/h*h1 */

    position: absolute;

    left: 50%; /* m*u 其中 m = .5*/

    top: 50%; /* n*f 其中 n = .5 */

    transform:

    translateX(-48.34558823529412%) /* (x - m*v)/w*w1 其中 x = 277,m = .5,v = 1080,w = 544 */

    translateY(378.8732394366197%); /* (y - n*g)/h*h1 其中 y = 1498,n = .5,g = 1920,h = 142 */

    }

    544x142

    background 实现示例

    background-size 值为 contain 时对应 contain 适配。

    background-size 值为 cover 时对应 cover 适配。

    background-size 值为 100% 100% 时对应 `fill 适配。

    background-position 百分比和 o p 意义相同

    div {

    position: absolute;

    width: 50.37037037037037%; /* w3 = w/v*u 其中 w = 544,v = 1080 */

    height: 7.395833333333333%; /* h3 = h/g*f 其中 h = 142,g = 1920 */

    background: url(http://ui.qzone.com/544x142) no-repeat; /* 背景图做元素 */

    background-size: cover;

    left: 25.64814814814815%; /* x3 = x/v*u 其中 x = 277, v = 1080 */

    top: 78.02083333333333%; /* y3 = y/g*f 其中 y = 1498, g = 1920 */

    background-position-x: -48.34558823529412%; /* o = (x - m*v)/w 其中 m = .5 , v = 1080,x = 277,w = 544*/

    background-position-y: 378.8732394366197%; /* p = (y - n*g)/h 其中 n = .5 , g = 1920,y = 1498,h = 142*/

    }

    实现示例

    preserveAspectRatio 的 meetOrSlice 为 meet 时对应 contain 适配。

    preserveAspectRatio 的 meetOrSlice 为 slice 时对应 cover 适配。

    preserveAspectRatio 值为 none 时对应 fill 适配。

    这里 preserveAspectRatio 的 meetOrSlice 相对的是容器,不是 适配区 这里用 transform 来定位,而 preserveAspectRatio 的 meetOrSlice 固定为 xMinYMin。

    svg {

    position: absolute;

    width: 50.37037037037037%;

    height: 7.395833333333333%;

    /* x4 = m*v/w*w3 + (x - m*v)/w*w1 */

    /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */

    top: 0;

    left: 0;

    transform:

    translateX(99.26470588235294%) /* m*v/w*w3 其中 m = .5,v = 1080,w = 544 */

    translateY(676.056338028169%); /* n*g/h*h3 其中 n = .5,g = 1920,h = 142 */

    overflow: visible;

    }

    svg image {

    transform:

    translateX(-48.34558823529412%) /* (x - m*v)/w*w1 其中 x = 277,m = .5,v = 1080,w = 544 */

    translateY(378.8732394366197%); /* (y - n*g)/h*h1 其中 y = 1498,n = .5,g = 1920,h = 142 */

    }

    辅助工具

    手动计算百分比及写 css 很麻烦,可以借助 sass 等工具来辅助简化。

    设计稿宽 v 高 g 一般是页面级常量。

    只需读取设计稿里每个 元素 的横坐标 x 、纵坐标 y 、宽 w 和 高 h,然后工具生成 css 即可。

    这下妈妈再也不用担心我还原问题、屏幕适配问题了。

    文字处理

    文字固定或单行不固定,svg 的 text 标签可以处理

    文字固定或单行不固定还可以将文字转为图片

    文字多行不固定,可以借助 svg 的 foreignObject 嵌入普通 div

    方案对比

    屏幕适配方案非常多,选哪种方式实现 整层适配 或 精简适配,下面是对比

    方案

    缩放

    定位

    文字缩放

    兼容

    padding-top 百分比

    只能依宽

    viewport

    支持情况复杂

    object-fit

    移动端 android 4.4.4+

    svg preserveRatio

    移动端 android 3.0+

    (max/min)-(width/height)

    固定文字

    background-size

    文字转图片

    展开全文
  • H5 分层屏幕适配

    2018-03-14 02:19:08
    转载请注明出处:http://hai.li/2018/03/14/h5-screen-adaptation.html 设计大大,这次真的是 "按设计稿来" 了,因为现在,任何机子都是设计稿标准机! 开发同学,这下你就直接读设计稿标注就好了啦! 屏幕适配 屏幕...

    转载请注明出处:http://hai.li/2018/03/14/h5-screen-adaptation.html

    设计大大,这次真的是 "按设计稿来" 了,因为现在,任何机子都是设计稿标准机! 开发同学,这下你就直接读设计稿标注就好了啦!

    屏幕适配

    屏幕适配应当指内容 适配区屏幕区 间的适配关系。
    单屏适配有 containcoverfill,多屏常见是 依宽
    containcover 还需要 定位 来处理留白和超出的内容。
    而同一个 H5 里不同内容往往用不同适配方式,即 分层

    clipboard.png

    clipboard.png


    优选 CSS

    • 页面加载后 js 往往需要延时至少 70ms 才能获取正确的 webview 宽高
    • css 往往最先执行,且 cssom 的解析往往和 dom 在最开始并行构建
    • js 会等待 dom 和 cssom 处理完后才能执行,而 css 只需等待 dom
    • 相比 js 在切换横竖屏时要切换 2 次进程来重绘,css 无需切换

    对于屏幕适配这类表现问题,能用 css 实现就应该用 css 实现。


    整层适配

    为确保各层元素同步缩放,不走样,每层的 适配区 应当等于设计稿大小。
    直接的实现就是构造和 适配区 一样尺寸的 容器整层适配
    容器 内可以有若干个相同适配方式的 元素
    svg 实现为例:

    <!doctype html>
    <html>
    <body>
    <style>
    .layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    </style>
    <!-- fill -->
    <svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="none"> <!-- 容器 -->
      <rect x="0" y="0" width="1080" height="1920" fill="rgba(96,96,96,.08)"/>  <!-- 元素 -->
    </svg>
    <!-- contain 居中 -->
    <svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMid meet"> <!-- 容器 -->
      <rect x="0" y="233" width="1080" height="1407" fill="#1565C0"/>  <!-- 元素 -->
    </svg>
    <!-- contain 居底 -->
    <svg class="layer" viewBox="0 0 1080 1920" preserveAspectRatio="xMidYMax meet"> <!-- 容器 -->
      <rect x="444" y="1779" width="191" height="39" fill="#1565C0"/>  <!-- 元素 -->
    </svg>
    </body>
    </html>

    实际效果:

    clipboard.png

    整层适配 实现简单,开发时直接读取设计稿值,可以满足大部分静态页面需求。
    但在 h5 动画多的时候,就得考虑动画流畅,页面性能了。
    用可替换元素如 <img> <object> <svg> 等做 容器,以及用背景图做 元素 的,
    在应用 css 动画时有性能缺陷:

    • 容器元素 应用 css 动画会造成频繁重排和重绘,导致卡顿。
    • 将和 适配区 尺寸相同的 容器 提升为合成层时所占内存过大,有多少层内存就翻多少倍。

    为这些实现方案提升性能就要针对 容器 动画,并减小 容器 的尺寸,最好是和一层里所有 元素 的最小总面积相等,做到 精简适配


    精简适配

    clipboard.png

    公式

    推导过程见 H5 分层屏幕适配公式推导

    设计稿
      宽 v
      高 g
      
    适配前元素
      横坐标 x
      纵坐标 y
      宽 w
      高 h
    
    适配后容器
      横坐标 x3 = x*u/v
      纵坐标 y3 = y*f/g
    
    适配后元素
      横坐标 x4 = m*u + (x - m*v)/w*w1 = m*v/w*w3 + (x - m*v)/w*w1
      纵坐标 y4 = n*f + (y - n*g)/h*h1 = n*g/h*h3 + (y - n*g)/h*h1
      宽 w3 = (w/v)*u
      高 h3 = (h/g)*f
      当 contain 方式适配时
        缩放值 s = Math.min(f/g, u/v)
        横向左留白占总留白 o = (m*v - x)/w
        纵向上留白占总留白 p =  (n*g - y)/h
      当 cover 方式适配时
        缩放值 s = Math.max(f/g, u/v)
        横向左超出占总超出 o = (x - m*v)/w
        纵向上超出占总超出 p =  (y - n*g)/h
    
    适配区
      垂直居顶时 m = 0
      垂直居中时 m = .5
      垂直居底时 m = 1 
      水平居左时 n = 0
      水平居中时 n = .5
      水平居右时 n = 1 
    
    相比整层适配内存优化 (w3*h3)/(v1*g1) >= w*h/(v*g)

    <img> 实现示例

    • 当设 max-width 为 w/v,max-height 为 h/g 时对应 contain 适配。
    • 当设 min-width 为 w/v,min-height 为 h/g 时对应 cover 适配。
    • 当设 width 为 w/v,height 为 h/g 时表示 fill 适配。
    • contain 适配时,如果图片原始尺寸小于 max-widthmax-height 时,用 zoom: 10 放大或者直接修改图片原始尺寸。
    • cover 适配时,如果图片原始尺寸大于 min-widthmin-height 时,用 zoom: .1 缩小或者直接修改图片原始尺寸。
    • top left 中百分比是相对屏幕宽 u 和高 f 的,对应 m*un*f
    • transform 中百分比是相对适配后元素宽 w1 和高 h1 的,对应 (m*v + x)/w*w1 和 (n*f + y)/h*h1
    <!doctype html>
    <html>
    <body>
    <style>
    img {
      /* min-width 和 min-height 构成了虚拟的容器 */
      min-width: 50.37037037037037%; /* w3 = (w/v)*u 其中 w = 544,v = 1080 */
      min-height: 7.395833333333333%; /* h3 = (h/g)*f 其中 h = 142,g = 1920 */
      zoom: .1;
      /* x4 = m*u + (x - m*v)/w*w1 */
      /* y4 = n*f + (y - n*g)/h*h1 */
      position: absolute;
      left: 50%; /* m*u 其中 m = .5*/
      top: 50%; /* n*f 其中 n = .5 */
      transform:
        translateX(-48.34558823529412%) /* (x - m*v)/w*w1 其中 x = 277,m = .5,v = 1080,w = 544 */
        translateY(378.8732394366197%); /* (y - n*g)/h*h1 其中 y = 1498,n = .5,g = 1920,h = 142 */
    }
    </style>
    <img src="http://ui.qzone.com/544x142"/> <!-- 元素 -->
    </body>
    </html>

    background 实现示例

    • background-size 值为 contain 时对应 contain 适配。
    • background-size 值为 cover 时对应 cover 适配。
    • background-size 值为 100% 100% 时对应 `fill 适配。
    • background-position 百分比和 o p 意义相同
    <!doctype html>
    <html>
    <body>
    <style>
    div {
      position: absolute;
      width: 50.37037037037037%; /* w3 = w/v*u 其中 w = 544,v = 1080 */
      height: 7.395833333333333%; /* h3 = h/g*f 其中 h = 142,g = 1920 */
      background: url(http://ui.qzone.com/544x142) no-repeat; /* 背景图做元素 */
      background-size: cover;
      left: 25.64814814814815%; /* x3 = x/v*u 其中 x = 277, v = 1080 */
      top: 78.02083333333333%; /* y3 = y/g*f 其中 y = 1498, g = 1920 */
      background-position-x: -48.34558823529412%; /* o = (x - m*v)/w 其中 m = .5 , v = 1080,x = 277,w = 544*/
      background-position-y: 378.8732394366197%; /* p = (y - n*g)/h 其中 n = .5 , g = 1920,y = 1498,h = 142*/
    }
    </style>
    <div></div> <!-- 容器 -->
    </body>
    </html>

    <svg> 实现示例

    • preserveAspectRatiomeetOrSlicemeet 时对应 contain 适配。
    • preserveAspectRatiomeetOrSliceslice 时对应 cover 适配。
    • preserveAspectRatio 值为 none 时对应 fill 适配。
    • 这里 preserveAspectRatiomeetOrSlice 相对的是容器,不是 适配区 这里用 transform 来定位,而 preserveAspectRatiomeetOrSlice 固定为 xMinYMin
    <!doctype html>
    <html>
    <body>
    <style>
    svg {
      position: absolute;
      width: 50.37037037037037%;
      height: 7.395833333333333%;
      /* x4 = m*v/w*w3 + (x - m*v)/w*w1 */
      /* y4 = n*g/h*h3 + (y - n*g)/h*h1 */
      top: 0;
      left: 0;
      transform:
        translateX(99.26470588235294%) /* m*v/w*w3 其中 m = .5,v = 1080,w = 544 */
        translateY(676.056338028169%); /* n*g/h*h3 其中 n = .5,g = 1920,h = 142 */
        overflow: visible;
    }
    svg image {
      transform:
        translateX(-48.34558823529412%) /* (x - m*v)/w*w1 其中 x = 277,m = .5,v = 1080,w = 544 */
        translateY(378.8732394366197%); /* (y - n*g)/h*h1 其中 y = 1498,n = .5,g = 1920,h = 142 */
    }
    </style>
    <svg viewBox="0 0 544 142" preserveAspectRatio="xMinYMin meet"> <!-- 容器 -->
      <image width="544" height="142" xlink:href="http://ui.qzone.com/544x142"/> <!-- 元素 -->
    </svg>
    </body>
    </html>

    辅助工具

    手动计算百分比及写 css 很麻烦,可以借助 sass 等工具来辅助简化。
    设计稿宽 vg 一般是页面级常量。
    只需读取设计稿里每个 元素 的横坐标 x 、纵坐标 y 、宽 w 和 高 h,然后工具生成 css 即可。
    这下妈妈再也不用担心我还原问题、屏幕适配问题了。

    文字处理

    • 文字固定或单行不固定,svgtext 标签可以处理
    • 文字固定或单行不固定还可以将文字转为图片
    • 文字多行不固定,可以借助 svgforeignObject 嵌入普通 div

    方案对比

    屏幕适配方案非常多,选哪种方式实现 整层适配精简适配,下面是对比

    方案缩放定位文字缩放兼容
    padding-top 百分比只能依宽
    viewport支持情况复杂
    object-fit移动端 android 4.4.4+
    svg preserveRatio移动端 android 3.0+
    (max/min)-(width/height)固定文字
    background-size文字转图片
    展开全文
  • js坐标H5新增事件

    2017-09-18 15:39:11
    screenX:触摸目标在屏幕中的x坐标。 screenY:触摸目标在屏幕中的y坐标。 target:触目的DOM节点目标。   上面的属性光这么看,果然非常繁琐,每个属性说的都是那么的细致,只有真刀实枪的来点小例子...
  • 获取点击手机屏幕的xy坐标值简单代码demo。代码简单易懂,可以取得手指点击手机时得到的xy坐标值,方便开发和写脚本
  • 最近有个需求是点击放大查看H5内容页面的图片,寻找到一个比较轻量的库YHPhotoBrowser,其中根据图片位置来缩放的动画需要传递一个图片所在屏幕里的位置CGRect,想获取H5的图片坐标那就需要JS注入了- (void)...
  • 最近有个需求是点击放大查看H5内容页面的图片,寻找到一个比较轻量的库YHPhotoBrowser,其中根据图片位置来缩放的动画需要传递一个图片所在屏幕里的位置CGRect,想获取H5的图片坐标那就需要JS注入了 - (void)...
  • js获取div相对屏幕坐标位置

    千次阅读 2016-08-02 11:01:00
    1:div相对屏幕坐标位置 function getDivPosition(div){ var x = div.getBoundingClientRect().left; var y = div.getBoundingClientRect().top; return {x:x,y:y}; } 参数传js原生...
  • h5开发移动端APP,屏幕设配的问题
  • 如何计算html元素在屏幕上的坐标

    千次阅读 2018-01-05 09:56:49
    获取页面某一元素的绝对X,Y坐标,可以用offset(): var X = $(‘#DivID’).offset().top; var Y = $(‘#DivID’).offset().left; 获取相对(父元素)位置: var X = $(‘#DivID’).position().top; var Y = $(‘#DivID...
  • h5游戏:适应不同尺寸屏幕的WEB2048

    千次阅读 2018-08-15 11:18:24
    一、界面展示及简单介绍 先上完成后不同尺寸屏幕下的效果图,界面模仿的原版2048:  (768px&lt;屏幕)  ...
  • h5

    2018-12-20 01:20:35
    文章目录h5_1h5_2h5_3h5_4 github 代码链接 h5_1 1、h5兼容IE 2、表单新增type,属性,元素 3、progress、meter、video、audio 4、querySelector、dataset、classList增删改查 5、全屏、退出全屏、是否全屏、网络...
  • 1.2.微信小程序适配iPhoneX底部小黑条(Home Indicator) (1)适配方案一:使用已知底部小黑条高度34px/68rpx来适配(不推荐) (2)适配方案二:使用微信官方API,getSystemInfo()中的safeArea对象...3.H5适配iP...
  • 前言Swiper.js一些需要我们手动设置的参数排版元素需要设置position:absolute绝对元素定位swiperAnimate方法的使用动画播放完成之后的监听上滑提示屏幕适配的问题Animate.cssstylievelocity.js总结 前言 现在...
  • 手持GPS,正在学习当中,晚上我在谷歌地球上找到端午节要去的目的地,找出了它的经纬度坐标,然后把数值输入GPS,结果一看地图,纳闷了,相差了好几十公里。我又以重庆长江大桥北桥头(石板坡)作为参照物,纬度是N...
  • 因苹果屏幕坐标系远点在左上角,所以webview的位置要往上移动68pt即可。适配后的游戏在安全区域显示如下: 非全屏H5小游戏iphoneX底部安全区适配解决方法 备注:我这里用的是cocoscreator v2.1.2版本 背景 往app...
  • //地图状态改变相关接口 mBaiduMap.setOnMapStatusChangeListener(new OnMapStatusChangeListener() { @Override public void onMapStatusChangeStart(MapStatus arg0) { // 手势操作地图,设置地图状态等操作...
  • LEFT: 为从左向右移的位置,即挂件距离屏幕左边缘的距离;  clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离  offsetLeft 返回对象相对于父级对象的布局或坐标的left值,就是以父级...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,383
精华内容 1,753
关键字:

h5屏幕坐标