wordpress 教程 pdf,网站搜索优化,住房建设部官方网站,网页设计结课论文项目中#xff0c;通过devtool模拟器为iphone6/7/8 plus中设备像素为414*736#xff0c;canvas的宽高为1242 * 2208#xff0c;根据设计稿配置的内容宽高是750 * 1204,这么多数据到底是怎么计算出来的#xff0c;如何适配的#xff1f;
全局函数 updateAllScreens
这个方…项目中通过devtool模拟器为iphone6/7/8 plus中设备像素为414*736canvas的宽高为1242 * 2208根据设计稿配置的内容宽高是750 * 1204,这么多数据到底是怎么计算出来的如何适配的
全局函数 updateAllScreens
这个方法用于刷新所有 Egret 播放器的显示区域尺寸。仅当使用外部 JavaScript 代码动态修改了 Egret 容器大小时需要手动调用此方法刷新显示区域。当网页尺寸发生改变时触发 resize 事件此方法会自动被调用。这里说的播放器WebPlayer实际上是指有 css 类选择器为 .egret-player的区域WebPlayer 并不是语义上的播放器意思而是根据获取的.egret-player dom元素初始化的一个对象。另外classegret-player 这个模版文件的class是webplayer获取的dom的唯一途径要是不小心删了就无法渲染了。
更新播放器视口尺寸
通过container.getBoundingClientRect()分别计算screenWidth、screenHeightcontainer就是上面所说的webplayer dom元素通过传以下4个参数调用calculateStageSize方法调整视口。
* 计算舞台显示尺寸
* param scaleMode 当前的缩放模式
* param screenWidth 播放器视口宽度 screenRect.width
* param screenHeight 播放器视口高度 screenRect.height
* param contentWidth 初始化内容宽度 option.contentWidth
* param contentHeight 初始化内容高度 option.contentHeight
以设计稿为750 * 1204 iphone6/7/8 plus 414 * 736为例分析各种适配模式下视口尺寸的大小。
// 初始化
let displayWidth screenWidth; // 414
let displayHeight screenHeight; // 736
let stageWidth contentWidth; // 750
let stageHeight contentHeight; //1204
calculateStageSize方法返回调整后的displayWidth、displayHeight、stageWidth、stageHeight4个参数
FIXED_WIDTH模式
1.计算width缩放比例scaleX 视口宽度/内容宽度 screenWidth/contentWidth 0.5222.改变内容高度 stageHeight 内容高度 视口高度/scaleX 736 / 0.522 1333也就是将内容高度改变从1204变为1333但由于宽高不是2的整数倍会导致图片绘制出现问题所以最后调整为1334
根据调整后的视口尺寸和container的宽高计算画布距离container的距离。因为fixed_width模式下视口宽高没有发生变化所以top、left为0画布贴合左上角
canvas.style.top (boundingClientHeight - displayHeight) / 2 px;
canvas.style.left (boundingClientWidth - displayWidth) / 2 px;
由于iphone6/7/8plus为dpr为3的高清屏为了解决1:1像素画布在retina屏下模糊的问题egret会对画布宽高乘以dpr大小再进行缩放。
let scalex displayWidth / stageWidth, // 0.552
scaley displayHeight / stageHeight; // 0.551724138
// 这里的$canvasScaleFactor是window.devicePixelRatio: 3
let canvasScaleX scalex * sys.DisplayList.$canvasScaleFactor; // 约1.656
let canvasScaleY scaley * sys.DisplayList.$canvasScaleFactor; // 约1.6551let m egret.Matrix.create();
// 初始化
m.identity();
// 这里scalex/scalex / canvasScaleX约分之后其实就是1/canvasScaleX也就是1/3。
m.scale(scalex / canvasScaleX, scaley / canvasScaleY);
m.rotate((rotation * Math.PI) / 180);
/** Matrix的6个参数
a, b, c, d, x, y
| | 旋转或者倾斜 | | | |
| | | |
|_ _ _ _ _ 缩放或旋转 _ _ _ _ | x偏移 y偏移
*
*/
let transform matrix(${m.a},${m.b},${m.c},${m.d},${m.tx},${m.ty});
egret.Matrix.release(m);
canvas.style[egret.web.getPrefixStyleName(transform)] transform;
上面代码最终呈现的效果是transform: matrix(0.333333, 0, 0, 0.333333, 0, 0)使得画布缩放至0.3333倍通过updateStageSize(stageWidth, stageHeight)方法将画布宽高设置为原来的三倍以适配retina屏。
小结当fixed_width下的不同手机屏幕设备像素不同时只会影响内容的高度这里的内容在egret中指的是舞台stage。回顾下egret对舞台的定义
在这个树状结构中处于最上层的是“舞台”。对应到程序中是 stage对象。舞台是Egret显示架构中最根本的显示容器。每个Egret应有且只有一个 stage对象。舞台是这个显示树结构的根节点。 通过适配计算出来的内容宽高都将变成stage的宽高而不是canvas对象的宽高。
其他的适配模式
EXACT\_FIT 不改变适口和内容宽高FIXED\_HEIGHT1.计算height缩放比例scaleY 视口高度/内容高度2.改变内容宽度 内容宽度\ 视口宽度/scaleNO\_BORDER1.分别计算width/height的缩放比例scaleXscaleY2.如果scaleX scaleY: displayHeight Math.round(stageHeight \* scaleX);3.如果scaleY scaleX: displayWidth Math.round(stageWidth \* scaleY);SHOW\_ALL1.分别计算width/height的缩放比例scaleXscaleY2.如果scaleX scaleY displayWidth Math.round(stageWidth \* scaleY);3..如果scaleY scaleX displayHeight Math.round(stageHeight \* scaleX);FIXED\_NARROW1.分别计算width/height的缩放比例scaleXscaleY2.如果scaleX scaleY stageWidth Math.round(screenWidth / scaleY);3.如果scaleY scaleX : stageHeight Math.round(screenHeight / scaleX);FIXED\_WIDE1. scaleX scaleY stageHeight Math.round(screenHeight / scaleX)
2. scaleY scaleX: stageWidth Math.round(screenWidth / scaleY)DefaultstageWidth screenWidth;stageHeight screenHeight;
事件位置计算
事件中获取的x,y位置都是相对于视口的位置因此需要将计算出相对于内容宽高的xy
private getLocation(event:any):Point {event.identifier event.identifier || 0;let doc document.documentElement;let box this.canvas.getBoundingClientRect();let left box.left window.pageXOffset - doc.clientLeft;let top box.top window.pageYOffset - doc.clientTop;let x event.pageX - left, newx x;let y event.pageY - top, newy y;if (this.rotation 90) {newx y;newy box.width - x;}else if (this.rotation -90) {newx box.height - y;newy x;}// 除以视口和内容宽度比值newx newx / this.scaleX;// 除以视口和内容的高度比值newy newy / this.scaleY;return $TempPoint.setTo(Math.round(newx), Math.round(newy));
}
