分类目录归档：悠哉博主的日常

悠哉博主的日常

三维笛卡尔坐标系转换为二维笛卡尔坐标系

发表回复

在三维坐标系画一些不需要z轴坐标的二维内容的时候，和直接在二维画布上画有些不一样，因为三维坐标系原点在画布中间，并且Y轴朝上，而且xyz轴的值范围都是-1~1，所以按照二维坐标系的坐标来绘制的话，需要在顶点shader里给顶点坐标最后乘一个转换矩阵，把它转换为三维坐标系中对应的点。

过程也很简单，把坐标系先移到左上角，把横纵坐标按照实际的像素数缩小，然后上下翻转一下，顺便把它喂给二向箔。

用我做的这个矩阵库举个例子的话就是（只写了关键步骤，省略了部分内容）

1
2
3
4
var to2dCoord=Mat.Identity(4).//新建一个单位矩阵
        translate3d(-1,1,0).//移到左上角
        scale3d(2/canvas.width,-2/canvas.height,0);//上下翻转，缩放坐标，喂给二向箔(去掉z轴)
gl.uniformMatrix4fv(u2dUniform,false,to2dCoord);//丢给shader

到顶点shader里这样乘一下

1
2
3
4
5
6
7
attribute vec3 aVertexPosition;
 
uniform mat4 u2dCoordinate;//转换矩阵
 
void main(void) {
    gl_Position = u2dCoordinate * vec4(aVertexPosition, 1.0);//最左边乘上转换矩阵
}

这样就可以当canvas2d画布用了。

悠哉博主的日常

解决Pixel无法连接2G网络的问题

发表回复

如果你是和我一样手贱点了手机信息里的United States频段而导致的无法连接到2G网络，可以尝试升级到7.1.2，并再次进入*#*#4636#*#*菜单，选择无限频段为Automatic，即可恢复频段设置。

写这篇文章时Android7.1.2还没发布正式版，可以在https://www.google.com/android/beta开通测试版计划，并从系统信息里更新系统。如果当你看到这篇文章的时候已经有7.1.2的系统了，那么直接升级到此版本或更高版本并修改设置即可。

由于Pixel目前并不支持天朝的VoLTE，所以在你只能连接4G网络的情况下是无法接打电话的，原本通话之前会回落到2G网络，所以如果你发现你无法接打电话了，也可以尝试这个办法。

悠哉博主的日常

20岁啦

6条评论

我在这个世界上存活20年啦，佳佳酱也持续运行了4年又4个多月。

现在大二上半学期。

前两天买了200条绿箭口香糖。为了解决笑起来只有一边有酒窝的问题。

凌晨1点56分的时候看完了 龙与虎 给自己拍了一脸狗粮。

目前在佳佳酱里公开的文章共有502篇。

吉他(GUItar)稍微有一点点会弹了，小提琴(Varlet)依然不会拉。

目前主要用的语言是中文，JavaScript。

稍微会一点点日本語。

有随身携带着4部手机的习惯，分别是Pixel XL，iPhone6 Plus，Nexus5，移动话费机。

没有去看《你的名字》。

还听着μ’s的歌。

好像胖了不少。

17号就要考英语六级了，希望过。虽然并没有复习。

在Steam库里有67只游戏和两只软件。

打算用写这篇博文当做过完生日。

于是用连接到32寸大屏幕的Surfacebook写下了这篇博文。

留给以后的佳佳用来回忆以前的时光。

悠哉博主的日常

【Javascript】触摸拖动事件

发表回复

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
(function(){
var extendEventDefaultOpt={
    touchdrag:{
        preventDefault:true,//阻止触摸移动的默认行为
        allowMultiTouch:false//允许在多点触控时也触发这个事件
    }
}
window.extendEvent={//扩展事件
    touchdrag:function(element,opt){
        var stats={},opt=Object.assign({},extendEventDefaultOpt.touchdrag,opt);
        element.addEventListener('touchstart',function(e){
            if(!opt.allowMultiTouch && e.changedTouches.length>1){stats={};return;}
            var ct=e.changedTouches;
            for(var t=ct.length;t--;){
                stats[ct[t].identifier]={x:ct[t].clientX,y:ct[t].clientY};
            }
        });
        element.addEventListener('touchmove',function(e){
            if(!opt.allowMultiTouch && e.touches.length>1){stats={};return;}
            var ct=e.changedTouches;
            for(var t=ct.length;t--;){
                var id=ct[t].identifier;
                if(!id in stats)continue;//不属于这个元素的事件
                var event=new TouchEvent('touchdrag',e);
                event.deltaX=ct[t].clientX-stats[id].x;
                event.deltaY=ct[t].clientY-stats[id].y;
                stats[id].x=ct[t].clientX;
                stats[id].y=ct[t].clientY;
                element.dispatchEvent(event);
            }
            if(opt.preventDefault)e.preventDefault();
        });
        element.addEventListener('touchend',function(e){
            var ct=e.changedTouches;
            for(var t=ct.length;t--;){
                var id=ct[t].identifier;
                if(id in stats)delete stats[id];
            }
        });
    }
}
})();

这是我做的一个自定事件，在其Event对象上会带有deltaX和deltaY两个属性以表示触摸拖动的偏移量。

用法是

1
extendEvent.touchdrag(元素,选项Object) //在元素上启用这个自定义事件

选项object的属性见上面源码里 extendEventDefaultOpt 对象的两个属性。
然后当手指在元素上拖动的时候就会触发touchdrag事件。
继续阅读【Javascript】触摸拖动事件 →