精华内容
下载资源
问答
  • 我正在开发一种工具,可以让你浏览“虚拟杂志”中的内容 . 为了实现翻转动画,我需要能够在动画的每一帧中获得当前的旋转角度,以便在它处于90度时翻转正面和背面 .这只适用于左右翻页(使用 rotateY ) ....

    我正在开发一种工具,可以让你浏览“虚拟杂志”中的内容 . 为了实现翻转动画,我需要能够在动画的每一帧中获得当前的旋转角度,以便在它处于90度时翻转正面和背面 .

    这只适用于左右翻页(使用 rotateY ) . 如果我想垂直翻转(日历样式),我需要能够计算 rotateX 的角度 .

    任何数学精英都可以帮助我吗?

    欢呼并提前谢谢!

    编辑:这是适用于 transformY 的功能 . 要检查的元素通过添加变换: rotateY(-180deg) 来变换动画,变换原点为左:

    function checkTransitionProgress() {

    // SRC: https://css-tricks.com/get-value-of-css-rotation-through-javascript/

    el = loremPages[index];

    var st = window.getComputedStyle(el, null);

    var tr = st.getPropertyValue("-webkit-transform") ||

    st.getPropertyValue("-moz-transform") ||

    st.getPropertyValue("-ms-transform") ||

    st.getPropertyValue("-o-transform") ||

    st.getPropertyValue("transform") ||

    false;

    var values = tr.split('(')[1].split(')')[0].split(',');

    var a = values[0];

    var b = values[1];

    var c = values[2];

    var d = values[3];

    var scale = Math.sqrt(a * a + b * b);

    var sin = b / scale;

    var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));

    if (direction == 'forwards') {

    if (angle < 90) {

    window.requestAnimationFrame(checkTransitionProgress);

    } else {

    target.style.zIndex = index;

    target.frontSide.classList.remove('lorem__side--in-front');

    target.backSide.classList.add('lorem__side--in-front');

    }

    } else {

    if (angle > 90) {

    window.requestAnimationFrame(checkTransitionProgress);

    } else {

    target.style.zIndex = targetInvertedIndex;

    target.frontSide.classList.add('lorem__side--in-front');

    target.backSide.classList.remove('lorem__side--in-front');

    }

    }

    }

    checkTransitionProgress();

    展开全文
  • 加载倾斜的时候发现要去平移倾斜到指定的位置上需要进行平移变换 这里使用了简单的平移方法(XYZ方向上) ... let tans = Cesium.Matrix4.fromTranslation( new Cesium.Cartesian3(offsetX, offsetY, offsetZ),..

    加载倾斜的时候发现要去平移倾斜到指定的位置上需要进行平移变换

    这里使用了简单的平移方法(XYZ方向上)

    参数描述:

    • layer: Cesium.Cesium3DTileset图层
    • offsetX:X方向上的平移
    • offsetY:Y方向上的平移
    • offsetZ:Z方向上的平移
          let tans = Cesium.Matrix4.fromTranslation(
            new Cesium.Cartesian3(offsetX, offsetY, offsetZ),
          );
          layer.modelMatrix = tans;

    展开全文
  • 转自竹音林,只为自己笔记,以备不时之需如果使用$(objName).css('transform')来获取CSS3里transform rotate旋转角度的度数,得到的是矩阵matrix(a,b,c,d,e,f)看到这个矩阵,很多人都是一脸蒙蔽的那么想获取rotate的...

    转自竹音林,只为自己笔记,以备不时之需

    如果使用$(objName).css('transform')来获取CSS3里transform rotate旋转角度的度数,得到的是矩阵matrix(a,b,c,d,e,f)

    看到这个矩阵,很多人都是一脸蒙蔽的

    那么想获取rotate的角度怎么办,看看我抄来的大作:)

    (一脸严肃)

    /*

    * 解析matrix矩阵,0°-360°,返回旋转角度

    * 当a=b||-a=b,0<=deg<=180

    * 当-a+b=180,180<=deg<=270

    * 当a+b=180,270<=deg<=360

    *

    * 当0<=deg<=180,deg=d;

    * 当180

    * 当270

    * */

    function getmatrix(a,b,c,d,e,f){

    var aa=Math.round(180*Math.asin(a)/ Math.PI);

    var bb=Math.round(180*Math.acos(b)/ Math.PI);

    var cc=Math.round(180*Math.asin(c)/ Math.PI);

    var dd=Math.round(180*Math.acos(d)/ Math.PI);

    var deg=0;

    if(aa==bb||-aa==bb){

    deg=dd;

    }else if(-aa+bb==180){

    deg=180+cc;

    }else if(aa+bb==180){

    deg=360-cc||360-dd;

    }

    return deg>=360?0:deg;

    //return (aa+','+bb+','+cc+','+dd);

    }

    用法~~~~

    var obj=$('#id');

    obj.click(function(){

    //构造getmatrix函数,返回上次旋转度数

    var deg=eval('get'+obj.css('transform'));

    //每次旋转多少度

    var step=45;

    obj.css({'transform':'rotate('+(deg+step)%360+'deg)'});

    });

    还有一个百度来的~~

    recursion

    var test = function ()

    {

    var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i;

    var wt = div.style['-webkit-transform'], wts = wt.match (reg);

    var $2 = RegExp.$2;

    console.log ($2);

    div.style['-webkit-transform'] = wt.replace ($2, parseFloat (RegExp.$3) + 10 + RegExp.$4);

    }

    rotate

    ddd
    展开全文
  • 一直想知道怎么获取transform中的各个属性值,奈何百度到的相关资料解释得过浅、错误或解释不完整,无奈只好自己摸索.........(注:本文涉及到矩阵运算)直接获取transform属性的属性值会出现matrix()二维变形或matri...

    一直想知道怎么获取transform中的各个属性值,奈何百度到的相关资料解释得过浅、错误或解释不完整,无奈只好自己摸索......。

    transform小东西大智慧,其直接涉及数字图像处理的仿射变换,还好我是偏数学的IT出生,必修课程有此门课程,理解它并不费劲。总之,先把笔记做好,方便以后查看。

    (注:本文涉及到矩阵运算)

    直接获取transform属性的属性值会出现matrix()二维变形或matrix3d()三维变形。

    matrix是矩阵的意思,其实图像的变形是把图像中每个位置的像素点乘以一个仿射矩阵,到达另外一个位置,最后把变换后的所有像素点组合起来。

    matrix3d(n,n.....)的属性值是由16个值组成4乘4的仿射矩阵。

    查阅资料得知其默认的仿射矩阵是

    4*4的单位阵

    对应的matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1

    );

    容易看出matrix3d的参数是通过拉伸,把矩阵变成一行(即:第2行开始每行放在第1行后面)

    通过实验和查阅资料得到的仿射矩阵

    单维平移变换(像素)

    仅在X轴平移,translateX(tx)对应的仿射矩阵

    对应的matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, tx, 0, 0,

    1)

    仅在Y轴平移,translateY(ty)对应的仿射矩阵

    对应的matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, ty, 0,

    1)

    仅在Z轴平移,translateZ(tz)对应的仿射矩阵

    对应的matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, tz,

    1)

    多维平移变换(像素):

    对应的matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,tx,ty,tz,1);

    可以看出多维平移变换的仿射矩阵是三个单维平移变换仿射矩阵的乘积,虽然矩阵的乘积不能随便换,但此处可以互换乘积顺序。

    尺度变换和平移变换相似,同理得:

    多维尺度变换(像素):

    对应的matrix3d(cx, 0, 0, 0, 0, cy, 0, 0, 0, 0, cz, 0, 0, 0, 0, 1

    );

    单维旋转变换(弧度):

    (sin(θ)和cos(θ)是三角函数,不懂的同学自行百度,θ是需要旋转的弧度)

    仅在X轴旋转,rotateX(θ)对应的仿射矩阵

    对应的matrix3d(1,0,0,0,0,cos(θ),sin(θ),0,0,-sin(θ),cos(θ),0,0,0,0,1);

    仅在Y轴旋转,rotateY(θ)对应的仿射矩阵

    对应的matrix3d(cos(θ),0,-sin(θ),0,0,1,0,0,sin(θ),0,cos(θ),0,0,0,0,1);

    仅在Z轴旋转,rotateZ(θ)对应的仿射矩阵

    对应的matrix3d(cos(θ),sin(θ),0,0,-sin(θ),cos(θ),0,0,0,0,1,0,0,0,0,1);

    多维旋转变换(弧度):

    三个轴同设置时旋转的的仿射矩阵和仅旋转单一方向有一定的关系;

    三轴同时旋转时按照设置顺序的倒序进行仿射矩阵的生成,如这样的设置顺序:

    rotateX(θ) rotateY(θ) rotateZ(θ)

    则其仿射矩阵应该这样生成

    三矩阵按顺序相乘,顺便不能变,矩阵乘法跟普通乘法不同。

    不推荐rotateX(θ) rotateZ(θ) rotateY(θ)这样的顺序设置,火狐上会有问题。

    多重3D变形

    同时旋转、平移、缩放的仿射矩阵也是有规律的,通过实践得出其仿射矩阵生成规律如下:

    如按照从translate、scale、rotate,坐标轴从X、Y、Z的顺序生成仿射矩阵如下:

    同样矩阵按顺序相乘,不能更改顺序,否则就不是从translate、scale、rotate,坐标轴从X、Y、Z这样的顺序生成的仿射矩阵。

    同样不推荐的设置顺序,如:rotateZ(90deg) translateX(10px) scaleX(1) translateY(20px) translateZ(30px) rotateX(90deg)

    scaleY(2) scaleZ(3) rotateY(90deg)

    理论上:如果随意设置translateX、scaleX、rotateX、translateY、scaleY、rotateY、translateZ、scaleZ、rotateZ,其仿射矩阵的生成应该是顺序设置的倒序,单维度仿射矩阵逐个相乘。并未做过实践,不保证其正确性。

    至此,常用的仿射变换应该都解释完了。

    实验:

    给元素设置css属性:

    translateX(10px) translateY(20px)

    translateZ(30px) scaleX(1) scaleY(2) scaleZ(3)

    rotateX(90deg) rotateY(90deg) rotateZ(90deg)

    先平移、后缩放、再旋转

    分析:

    套入上述仿射矩阵得:

    matlab计算,得出结果

    浏览器中JQuery获取:matrix3d(0, 0, 3, 0, 0, -2, 0, 0, 1, 0, 0, 0, 10,

    20, 30, 1),结果计算正确。

    换一种设置顺序:先旋转、后平移、再缩放

    transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg)

    translateX(10px) translateY(20px)

    translateZ(30px) scaleX(1) scaleY(2)

    scaleZ(3);

    matlab计算:

    浏览器中JQuery获取:matrix3d(0, 0, 1, 0, 0, -2, 0, 0, 3, 0, 0, 0, 30,

    -20, 10, 1),结果计算正确。

    值得注意的是上述两个例子,两次属性值相同,顺序不同,得到的却是不同的仿射矩阵,因而,我们在设置transform属性值的时候要注意顺序。

    关于transform属性获取问题

    如果获取的是计算后的transform,那么它返回的是一个4*4仿射。矩阵如果是多维旋转,其返回的是运算后的仿射矩阵要获取单一属性值是困难的。三轴同时旋转,要从一个计算后的矩阵中分解出3个矩阵是困难的,一般都是知道其它2矩阵,才能得出第3个矩阵;如果是多重3D变形,其获取难度将更困难。

    举个例子:给出matrix3d(0, 0, 1, 0, 0, -2, 0, 0, 3, 0, 0, 0, 30, -20,

    10, 1),能确定它是包含了什么变换吗。平移?旋转?缩放?

    如果是直接获取样式表的样式,直接元素.style.transform再对它返回的字符串进行拆分就可以获取到你在样式表上设置的值了。

    var test =

    document.getElementByIdx_x('div').style.transform

    matrix(a,b,c,d,e,f)有位dalao做了很详细的解析,可以参考:http://www.zhangxinxu.com/wordpress/?p=2427

    其中有个疑问,就是文章中解释到“x, y表示转换元素的所有坐标(变量)”,理解起来挺抽象的。

    参考《数字图像处理》后发现,应该可以这样理解:

    其x, y在设置偏移中心的时候是中心点的坐标;

    在设置缩放、旋转、平移的时候应该是元素的像素坐标,其实就是像素点在元素中的坐标。

    总结:我们在用transform的时候,所用的translate、scale、rotate,不过是修改仿射矩阵上的数值。如果单单用这些属性会被限制住,用仿射矩阵可以做一些translate、scale、rotate做不到的事情,比如我随便构造一个4*4的仿射矩阵,套用到元素中,会发生一些奇怪的事。还可参考:http://www.zhangxinxu.com/wordpress/?p=2427,一个简单的2D镜像对称例子,怎么构造出有用的仿射矩阵,我还有待研究。总之,先把笔记做好......。

    ---------------------

    作者:L-灵刃

    来源:CSDN

    原文:https://blog.csdn.net/lht748/article/details/53259128

    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • svg的transform-matrix详解

    2021-02-27 13:34:28
    一、svg transform的种类 translate(平移) ...matrix接口样式:matrix(a,b,c,d,e,f) 对应矩阵: a c e b d f 0 0 1 1.Translate(tx, ty) 矩阵: 1 0 tx 0 1 ty 0 0 1 写法:matrix(1,0,0,1,tx,ty) .
  • function decomposeLDMatrix(ldMatrix) { const m = LDMatrixToMatrix(ldMatrix);... console.log('matrix数据=', matrix); console.log('rotation数据=', rotation); console.log('rscale数据=', scale); 输出结果:
  • // Create a matrix to do rotation transform = new Matrix(); } /** * Add the Rotation to our Transform matrix. * * A new point, with the rotated coordinates will be returned * @param degrees * @return...
  • 使用JavaScript从matrix3d()获取3D CSS旋转值
  • 取某行某列的最大值: print("max value in each column: ", np.max(p, axis=0)) #取每一列的最大值并打印 print("max value in each row: ", np.max(p, axis=1)) #取每一行的最大值并打印 import numpy as np ...
  • R语言ncol函数获取dataframe或者matrix列的个数实战 目录 R语言ncol函数获取dataframe或者matrix列的个数实战 #基本语法 #计算dataframe的列数 #计算matrix的列数 #ncol Returns NULL #基本语法 ...
  • 在Unity中,我们知道在inspector中修改Positon以及Rotation就可以更改相机的位置以及旋转信息,我们知道Rotation都是用Quaternion四元组进行表示的,在Unity中有个一个函数Matrix4x4.TRS可以根据Postion、Quaternion...
  • = null // 画布当前的 Matrix, 用于获取当前画布的一些状态信息,例如缩放大小,平移距离等 private var mCanvasMatrix = Matrix() // 将用户触摸的坐标转换为画布上坐标所需的 Matrix, 以便找到正确的缩放中心...
  • ResourceCanary 介绍Matrix 的内存泄漏监控是由 ResourceCanary 实现的,准确的说,ResourceCanary 只能实现 Activity 的内存泄漏检测,但在出现 Activity 内存泄漏时,可以选择 dump 一个堆转储文件,通过该文件,...
  • 图像按矩阵缩放:Matrix matrix = new Matrix();matrix.postScale(...);matrix.postTranslate(...);matrix.postRotate(...);...我试图获取矩阵的第一个值来检查:float pendingZoom = 0.6f;float[] ...
  • R语言dim函数获取dataframe、matrix的维度、shape实战 目录 R语言dim函数获取dataframe、matrix的维度、shape实战 #基本语法 #dim获取数据的shape #获取所有列表项的维度 #基本语法 dim(data) #dim获取...
  • 正如我在评论中提到的那样,使用vector-of-vector来表示matrix是不现实的,原因如下:build立起来很麻烦;很难改变;caching局部性不好。这是我创build的一个非常简单的类,它将在一个vector中保存一个2Dmatrix。 这...
  • 事情是我给了这个控制矩阵H.0000111111111H = 01110001112221012012012012我被要求获取此代码的所有单词.线性和块码的理论说,字V是H * Vt = 0(零)的字,其中Vt被转置为V.目前我知道有3 ^ 10 = 59049个可能的单词.这是...
  • csr_matrix矩阵

    2020-12-25 14:49:10
    csr采用按行压缩的方法,将原始的矩阵用三个数组表示: 三个数组的形式有两种 第一种 from scipy.sparse import * ...t = csr_matrix((data,(row,col)),shape=(3,3)) print(t) print(t.todense()) >> (0, 0) 1
  • R语言nrow函数获取dataframe或者matrix行计数统计 目录 R语言nrow函数获取dataframe或者matrix行计数统计 #基本语法 #按照条件计算行数 #complete.cases函数查看数据完整的行数(没有NA和Null) # nrow函数...
  • 获取Camera的y坐标 getLocationZ() 获取Camera的z坐标 getMatrix(Matrixmatrix) 获取转换效果后的Matrix对象 restore() 恢复保存的状态 rotate(float x, float y, float z) 沿X、Y、Z坐标进行旋转 rotateX(float deg...
  • @MatrixVariable可以从url中获取路径参数。 一、使用 单个参数 接口方法: @ApiOperation(value = "测试@MatrixVariable", notes = "单个参数") @GetMapping(value = "/matrix/{param}", produces = {MediaType....
  • matrix_keypad 矩阵按键驱动分析//主要函数调用过程matrix_keypad_probematrix_keypad_parse_dt //根据设备树构造 pdatapdata->num_row_gpios = nrow = of_gpio_named_count(np, "row-gpios");pdata->num_col_...
  • UE4 View and Projection Matrix FSceneView* FEditorViewportClient::CalcSceneView(FSceneViewFamily* ViewFamily) { FSceneViewInitOptions ViewInitOptions; FViewportCameraTransform& ViewTransform = ...
  • Matrix-APKChecker分析

    2021-09-08 10:51:19
    Matrix是腾讯开源的一个APM项目,对于android优化方面无从下手的话,感觉可以研究一下 这里主要分析其中一个模块APKChecker,这个模块和其它模块的关联性不是很大,可以单独提取出来、主要就是检测apk内重复资源文件...
  • 应用性能监控和性能优化一直是老生常谈的话题,很多大厂都有专门的团队在做,腾讯就做了一款性能监控的框架matrix,且已经开源,对于个人而言,这是一次绝佳的学习机会,像如何做到启动耗时的计算,就要去了解App的...
  • 1.混淆矩阵confusion_matrix 适用于二分类、多分类。 每一行之和表示该类别的真实样本数量,每一列之和表示被预测为该类别的样本数量。 1.分类模型之混淆矩阵: 每一行和每一列分别对应样本输出中的每一个类别...
  • Matrix类的设计与实现_艾孜尔江撰

    千次阅读 2021-06-14 10:57:19
    // 获取正交投影矩阵的逆矩阵 ---> 获取其转置矩阵即可 static Matrix4f getMatrixInvertForOrthogonal(const Matrix4f& orthographicMatrix); // 建立并获取一个左手坐标系的相机变换(视角)矩阵 static ...
  • Android Matrix矩阵

    2021-05-26 16:24:25
    MatrixMatrix是一个矩阵,主要功能是坐标映射,数值转换,在View,图片,动画效果等各个方面均有运用。基本变换有4种:平移(Translate)缩放(Scale)旋转(Rotate)错切(Skew)矩阵运算矩阵加减法:就是相同位置的数字相加...
  • 1. 前言2018年12月25日,微信团队自研的APM利器,Matrix正式开源了。❝Matrix 是一款微信研发并日常使用的 APM (Application Performance M...
  • DataMatrix 码提取流程

    2021-10-26 21:58:37
    DM 码是一种二维矩阵码,由深浅两种不同灰度的...两种类型的DM 码外型基本一致,故可使用同一个定位、提取算法获取图像中的DM 码信息。 参考: [1]郭浩铭. 复杂背景下的DataMatrix二维码识别算法研究[D].深圳大学,2017.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 78,397
精华内容 31,358
关键字:

获取matrix