前言

博客内容为自身经验总结,并非调查分析结论

美术设计

1. ps: 使用广泛,基本每个美术都会使用
2. fgui: 用于游戏素材转化为游戏 ui,支持 cocos unity 甚至网页,如未来有迁移引擎需求优先选用
3. spine: 用于设计人物动作和一些技能特效,支持 cocos unity 等, 使用容易

游戏配置表工具

1. 简单 json: 简单基本所有语言都支持解析和生成
2. luban: 功能强大,配置自定义模版和 tag 功能可以很方便的进行改造, 并支持常见多种编程语言和二进制格式配置

客户端

1. cocos creator2.x
   优点: 使用简单,容易掌握,但可能教程零散初学者不容易进阶, 只能开发 2d 项目, 适合开发微信小游戏,字节小游戏等, 开源
   缺点: 自带功能不足, 初学者可能不容易找齐需要等东西

2. cocos creator3.x
   优点: 具有 2 的优点, 同时有官方不断维护添加新特性, 具有更多和批的 api 等, 支持较中轻度 3d 游戏开发, 开源
   缺点: 和 2 代开发模式和 api 上有变化,需要重新上手

3. unity
   优点: 功能齐全, 插件丰富, 教程丰富, 可开发的游戏范围广, api 稳定预料之外的情况少
   缺点: 上手比 cocos 困难, 思维模式偏程序有些功能不符合直觉, 需要账号许可证, 个人账号公司使用会被封等

服务端

1. php
   优点: 语法简单,对于有 web 经验的人可以把公告,账号登陆,后台管理,活动页面等功能全部包办,成本低
   缺点: 对象内存占用较大, 处理大量对象或者大数组时容易瓶颈, 需要借助 workerman swooole 等扩展库实现常驻服务才能有足够性能

2. nodejs
   优点: 可用库极多,并且生态庞大, 全异步编程网络性能高, 调试容易, 有内存分析工具, 可以和客户端复用代码,例如普洱 ts 开发 unity, 此时两边都是 ts 执行环境
   缺点: 弱类型,不熟悉时进行数值计算容易产生类似 NaN Infinite 等奇怪结果, 各种 js ts 配置纷飞 es6 esNext tsconfig 等等, 打包调试需要一定实践

3. go
   优点: 一般情况性能比脚本高,并发编程轻松, 强类型心智负担会小点, 打包发布容易,也比较容易打包成库供客户端复用逻辑, 包隔离解耦彻底
   缺点: 处理循环引用的方式太暴力导致编写业务代码速度慢, 不太适合快速迭代的业务需求

游戏框架

1. Pinus: 历史悠长的一个框架
2. Colyseus: 有房间管理, 状态缓存, 状态同步客户端等功能, 适合有大厅有匹配的游戏类型, ts 编写容易和客户端集成
3. Nakama: 社区庞大, go 为开发语言,支持 js lua 等作为脚本语言
4. tsrpc: ts 语言,可能很好的很全 ts 的前后端协作,自带类似 proto 的运行时类型检查

数据存储

1. mysql
   优点: 功能齐全, 拥有事物处理功能, 程序开发和运维方便
   缺点: 开发人员流动大或设计水平不足时,会导致表关系难以维护扩展和性能问题, 一般总读写超过 5k/s 已经容易出现性能问题, 可能结算奖励的一波写入就卡顿了, 集群需要改动

2. redis
   优点: 速度极快, 除非出现循环嵌套遍历, 一般没有性能问题, 总读写 20w/s 以上, 阻塞读写也有 5k/s 以上, 集群简便
   缺点: 不支持范围查询和临时调整索引,涉及条件查询时需要将相关数据全部取出在程序里筛选, 全内存化用户流失后数据不好迁移到硬盘上成本较高

3. mongodb(了解不多)
   优点: 功能丰富,集群容易, 速度够用
   缺点: 数据较少时(少于 50g)价格较贵,机器配置要求高, 市场上掌握的人员相对较少

4. 其他 NoSql 数据库(了解不多)
   360pika: 使用历史和范围较大的国内开源项目, 支持 redis 协议,数据冷热分离,比 redis 有更多的运维命令
   rocksdb: c++写成,是很多其他 NoSql 的底层实现, 业务使用需要理解的细节较多,不太推荐
   kvrocks: rocksdb 的一种封装实现,支持 redis 协议, 有基金会维护
   Tendis: rocksdb 的一种封装实现, 支持 redis 协议, 已经不活跃
   ScyllaDB: 新星数据库, 被知名公司例如 discord 使用,类 sql 的语法

前言

• 为了寻找在php发生死循环和内存泄漏的时候能够定位问题的方案,而尝试了phpdbg

安装

window下通过phpstudy安装好php7.4.23后,phpdbg已经自带了

命令使用, 网上的资料很不齐, 开两个控制台一个操作一个翻help说明,也算用得过去

排查cpu死循环

1
2
3
4
5
6
7
8
9
10
11

<?php

function test(){
    $a = 123;
    return 1 + $a;
}

while (true)
{
    $b = 5 + test();
}

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

> phpdbg -e debug.php

[Welcome to phpdbg, the interactive PHP debugger, v7.4.3]
To get help using phpdbg type "help" and press enter
[Please report bugs to <http://bugs.php.net/report.php>]
prompt>

// 这一步需要前面启动phpdbg时 参数带上 -e debug.php run 才能正常执行
prompt> run 

// 然后按 ctrl+c 表示开始断点,此时断在哪是随机的,因为还没开始添加断点
[Program received signal SIGINT]
prompt> 

// 打印当前堆栈的opcodes
prompt> p
[Stack in C:\Users\Administrator\AppData\Roaming\JetBrains\IntelliJIdea2022.1\scratches\debug.php (7 ops)]
L1-12 {main}() C:\Users\Administrator\AppData\Roaming\JetBrains\IntelliJIdea2022.1\scratches\debug.php - 0x262fc860
500 + 7 ops
 L8    #0     JMP                     J5
 L10   #1     INIT_FCALL              128                  "test"
 L10   #2     DO_FCALL                                                          @0
 L10   #3     ADD                     5                    @0                   ~1
 L10   #4     ASSIGN                  $b                   ~1
 L8    #5     JMPNZ                   true                 J1
 L12   #6     RETURN<-1>              1
 
// 打印当前所处的位置
prompt> back
frame #0: {main} at C:\Users\Administrator\AppData\Roaming\JetBrains\IntelliJIdea2022.1\scratches\debug.php:10
prompt>

发现死循环在 debug.php:10 的第十行

排查内存泄漏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
ini_set('memory_limit', "10M");


class T1
{
    public T1 $t1;
}

function test()
{
    $n = 10000000;
    $arr = [];
    while ($n--) {
        $t1 = new T1();
        $arr[] = $t1;
    }
}

while (true){
    echo PHP_EOL;
    test();
}

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
43
44
45
46
47
48
49
50

> phpdbg -e debug.php

[Welcome to phpdbg, the interactive PHP debugger, v7.4.3]
To get help using phpdbg type "help" and press enter
[Please report bugs to <http://bugs.php.net/report.php>]
prompt>

// 这一步需要前面启动phpdbg时 参数带上 -e debug.php run 才能正常执行
prompt> run 
[PHP Fatal error:  Allowed memory size of 10485760 bytes exhausted (tried to allocate 4194312 bytes) in C:\Users\Administrator\AppData\Roaming\JetBrains\IntelliJIdea2022.1\scratches\debug.php on line 16]

// 打印当前堆栈的opcodes
prompt> p
[Stack in test() (20 ops)]
L10-18 test() C:\Users\Administrator\AppData\Roaming\JetBrains\IntelliJIdea2022.1\scratches\debug.php - 0x2459c282000 + 20 ops
 L10   #0     EXT_NOP
 L12   #1     EXT_STMT
 L12   #2     ASSIGN                  $n                   10000000
 L13   #3     EXT_STMT
 L13   #4     ASSIGN                  $arr                 array(0)
 L14   #5     EXT_STMT
 L14   #6     JMP                     J16
 L15   #7     EXT_STMT
 L15   #8     NEW                     "T1"                                      @2
 L15   #9     EXT_FCALL_BEGIN
 L15   #10    DO_FCALL
 L15   #11    EXT_FCALL_END
 L15   #12    ASSIGN                  $t1                  @2
 L16   #13    EXT_STMT
 L16   #14    ASSIGN_DIM              $arr                 NEXT
 L16   #15    OP_DATA                 $t1
 L14   #16    POST_DEC                $n                                        ~6
 L14   #17    JMPNZ                   ~6                   J7
 L18   #18    EXT_STMT
 L18   #19    RETURN<-1>              null

// 打印打印当前的堆栈信息
prompt> back
frame #0: test() at C:\Users\Administrator\AppData\Roaming\JetBrains\IntelliJIdea2022.1\scratches\debug.php:16
frame #1: {main} at C:\Users\Administrator\AppData\Roaming\JetBrains\IntelliJIdea2022.1\scratches\debug.php:22

// 检查$t1 变量
prompt> ev $t1
T1 Object
(
)

// 检查$arr 变量
prompt> ev print_r(count($arr)) 
655361  

发现是$arr这个变量太大了,问题解决

总结

因为phpdbg好像可以不受 memory_limit 的限制并且进程崩溃后还能继续调试崩溃前的内存信息所以可以尝试用来处理内存泄漏问题,
或者通过get_declared_classes() get_defined_vars() 查找所有类的静态变量以及所有声明变量来dump数据慢慢分析.
如果是死循环问题, 一旦遇到, 可以结合上面的back p n等命令快速定位死循环的位置,快速定位.
但是phpdbg有个缺点,不能attach运行中的程序,是个遗憾.

• 命令n 执行到下一行
• 命令s 步入函数
• b 数字 添加断点到php源码的第几行
• c 继续运行
• ctrl+c 暂停运行
• ev php表达式, 不能空格,有时需要分号

前言

为了备份手机里的生活照片和一些有趣的短视频而写,可以统一备份指定文件夹到机械硬盘里,可重复允许,以存在文件会跳过

php script.php --from 文件夹 --to 文件夹

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

<?php

$str = fread(STDIN, 1000);


// php index.php -f xxx -t xxx
$shortopts = "";
$shortopts .= "f:";
$shortopts .= "t:";

$longopts = array(
    "from:",     // Required value
    "to:",     // Required value
    "group_by_month:",     // Required value
);

$options = getopt($shortopts, $longopts);

$path = $options['f'] ?? $options['from'] ?? "";
$target = $options['t'] ?? $options['to'] ?? "";
$group_by_month = $options['group_by_month'] ?? true;
//var_dump($options, $group_by_month);
//exit();
//$path = 'e:\\life';
//$target = "e:\\life2";
//$group_by_month = true;

$path = str_replace(['/', '\\'], DIRECTORY_SEPARATOR, $path);;
$target = str_replace(['/', '\\'], DIRECTORY_SEPARATOR, $target);;

@mkdir($target);
if (!$path || !$target || !file_exists($path) || !file_exists($target)) {
    exit("参数不可用");
}

//echo "使用参数 from=$path to=$target group_by_month=$group_by_month" . PHP_EOL;
echo "使用参数 from=$path to=$target " . PHP_EOL;

function read_all($dir, &$res)
{
    if (!is_dir($dir)) return false;

    $handle = opendir($dir);

    if ($handle) {
        while (($fl = readdir($handle)) !== false) {
            $temp = $dir . DIRECTORY_SEPARATOR . $fl;
            if (strpos($temp, 'RECYCLE') > -1 || strpos($temp, 'System Volume Information') > -1) {
                continue;
            }
            //如果不加  $fl!='.' && $fl != '..'  则会造成把$dir的父级目录也读取出来
            if (is_dir($temp) && $fl != '.' && $fl != '..') {
                read_all($temp, $res);
            } else {
                if ($fl != '.' && $fl != '..') {
                    $res[] = $temp;
                }
            }
        }
    }
}

function rm_empty_dir($path)
{
    if (is_dir($path) && ($handle = opendir($path)) !== false) {
        while (($file = readdir($handle)) !== false) {// 遍历文件夹
            if ($file != '.' && $file != '..') {
                $curfile = $path . '/' . $file;// 当前目录
                if (is_dir($curfile)) {// 目录
                    if (strpos($curfile, 'RECYCLE') > -1 || strpos($curfile, 'System Volume Information') > -1) {
                        continue;
                    }
                    rm_empty_dir($curfile);// 如果是目录则继续遍历
                    if (count(scandir($curfile)) == 2) {//目录为空,=2是因为.和..存在
                        rmdir($curfile);// 删除空目录
                    }
                }
            }
        }
        closedir($handle);
    }
}


function Directory($dir)
{
    echo "创建文件夹: $dir" . PHP_EOL;
    return is_dir($dir) or Directory(dirname($dir)) and mkdir($dir, 0777);

}

function sbasename($filename)
{
    return preg_replace('/^.+[\\\\\\/]/', '', $filename);
}

$arr = [];
read_all($path, $arr);

$info = date("Y-m", filemtime($arr[0]));
echo "开始复制" . PHP_EOL;
// 检查复制源位置的数据
foreach ($arr as $item) {
    $fileName = sbasename($item);
    $mtime = filemtime($item);
    if($group_by_month){
        $dirName = $target . DIRECTORY_SEPARATOR . date('Y-m', $mtime);
    }else{
        $dirName = dirname(str_replace($path, $target, $item));
    }

    if (!is_dir($dirName)) {
        Directory($dirName);
    }
    $tmpTarget = $dirName . DIRECTORY_SEPARATOR . $fileName;
    if (!file_exists($tmpTarget)) {
        // $item = iconv('utf-8', 'gbk', $item);
        // $tmpTarget = iconv('utf-8', 'gbk', $tmpTarget);
        copy($item, $tmpTarget);
        touch($tmpTarget, $mtime);
        echo "复制: $item => $tmpTarget" . PHP_EOL;
    } else {
        echo "跳过: $item" . PHP_EOL;
    }
    // break;
}
echo "结束复制" . PHP_EOL;

相关链接

链接内容里有读音

前言

• 真的喜欢代码的人,有谁不期望有一天自己创造一门语音或者编译器呢,哪怕只是学习下程序是怎么跑起来的.
• 入门老师 HowdyAI 和 他的视频

实现 & | ( ) 表达式运算的程序, 有穷自动机, 人生第一段语法分析代码, 这种开心花钱真的只能通过学习获得

运行结果
输入: true |(false &true )
输出: 1

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

<?php


$s = [
    function () {
        return true;
    },
    '|',
    '(',
    function () {
        return false;
    },
    '&',
    function () {
        return true;
    },
    ')'
];

$echo = "";
foreach ($s as $item) {
    if(is_callable($item)){
        $echo .= $item() ? "true " : "false ";
    }else{
        $echo .= $item;
    }
}
echo $echo . PHP_EOL;

$index = 0;

// 终结符为 A1
class StateA
{
    const A0 = 0; // 初始
    const A1 = 1; // 计算了计算式
    const A2 = 2; // 匹配了符号
}

function A($word, $isReset)
{
    static $state = StateA::A0;
    static $expr = null;
    static $and = null;

    if ($isReset) {
        $state = StateA::A0;
        $expr = null;
        $and = null;
        return [];
    }

    switch ($state) {
        case StateA::A0:
            switch ($word) {
                case is_callable($word):
                    $tmp = $word();
                    $expr = function () use ($tmp) {
                        return $tmp;
                    };
                    $state = StateA::A1;
                    break;
                default:
                    print_r($word);
                    throw new Exception($word);
            }
            break;
        case StateA::A1:
            switch ($word) {
                case "&":
                    $and = true;
                    $state = StateA::A2;
                    break;
                case "|":
                    $or = true;
                    $state = StateA::A2;
                    break;
                default:
                    throw new Exception();
            }
            break;
        case StateA::A2:
            switch ($word) {
                case is_callable($word):
                    if ($and) {
                        $tmp = $expr() && $word();
                    } else {
                        $tmp = $expr() || $word();
                    }
                    $and = null;
                    $expr = function () use ($tmp) {
                        return $tmp;
                    };
                    $state = StateA::A1;
                    break;
                default:
                    throw new Exception();
            }
            break;
        default:
            throw new Exception();
    }
    return [$state, $expr];
}


function B($word, $isEnd)
{
    static $exprList = [
        []
    ];
    if ($isEnd) {
        if(count($exprList) !== 1){
            print_r($exprList);
            throw new Exception();
        }
        $tmp = reset($exprList);
        A(null, true);
        foreach ($tmp as $item) {
            [$tmpState, $tmpR] = A($item, false);
        }
        if (!isset($tmpState) || !isset($tmpR)) {
            throw new Exception();
        }
        return $tmpR();
    }

    switch ($word) {
        case "(";
            $exprList[] = [];
            break;
        case ")":
            $tmp = array_pop($exprList);
            $tmpState = null;
            A(null, true);
            foreach ($tmp as $item) {
                [$tmpState, $tmpR] = A($item, false);
            }
            if (!isset($tmpState) || !isset($tmpR)) {
                throw new Exception();
            }
            $exprList[count($exprList) - 1][] = $tmpR;
            break;
        default:
            $exprList[count($exprList) - 1][] = $word;
    }
    return null;
}

foreach ($s as $word) {
    B($word, false);
}

$r = B(null, true);

print_r($r);

有穷自动机 第二弹 2022年8月5号

• 可以解析array() 的数据结构,例如 array(1,1,2) 能解析为数组变量

  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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

  <?php $valueRaw = "array(1,1,2)"; $tokens = token_get_all("<?php $valueRaw"); array_shift($tokens); $array = getArray($tokens); var_dump($array); function getArray($tokens) { $res = null; $arrays = [ ]; $k = null; $v = null; $minus = false; foreach ($tokens as $token) { if (!is_array($token)) { switch ($token) { case ")": if (!is_null($v)) { if (count($arrays)) { if (is_null($k)) { $arrays[count($arrays) - 1][] = $v; } else { $arrays[count($arrays) - 1][$k] = $v; } } else { throw new Exception(); } $k = null; $v = null; } $tmp = array_pop($arrays); if (count($arrays)) { $v = $tmp; } else { if (is_null($res)) { $res = $tmp; } else { throw new Exception(); } } break; case ",": if (!is_null($v)) { if (count($arrays)) { if (is_null($k)) { $arrays[count($arrays) - 1][] = $v; } else { $arrays[count($arrays) - 1][$k] = $v; } } else { throw new Exception(); } $k = null; $v = null; } break; case "-": $minus = true; break; } } else { switch ($token[0]) { case T_ARRAY: $arrays[] = []; break; case T_LNUMBER: $v = intval($token[1]); if($minus){ $minus = false; $v = -$v; } break; case T_STRING: case T_CONSTANT_ENCAPSED_STRING: $v = substr($token[1], 1, (strlen($token[1]) - 2)); break; case T_DNUMBER: $v = floatval($token[1]); if($minus){ $minus = false; $v = -$v; } break; case T_WHITESPACE: break; case T_DOUBLE_ARROW: $k = $v; $v = null; break; default: throw new Exception(); } } } return $res; }

• 下载一个纯真数据库
  官网地址
  如果很慢可以尝试自己服务器的链接

• 安装setup.exe，完成后启动界面，点击界面上的解压就能看到ip地址数据

• 格式说明
  第一列 地址开始
  第二列地址结束

1. 前因

uniapp官方api的图片预览器,不支持在web端进行双指放大操作, 手机端是可以的

2. 这个代码哪来的,有啥用

网上抄的,但是改了兼容uniapp,只能预览单张图片,多张滑动查看没有,纯css js 兼容性好点

3. 代码如下

imgOver.vue

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224

<template>
    <div class="img-vuer" v-transform v-finger:tap="mTab" v-finger:pinch="handlePinch" v-finger:doubleTap="handleDoubleTap" v-finger:multipointStart="handleMultipointStart" v-finger:pressMove="handlePressMove" v-finger:touchEnd="handleTouchEnd">
        <img style="position:absolute;" v-transform :src="src">
    </div>
</template>

<script>
/* eslint-disable */
import To from './to';
export default {
    props: {
        src: {
            type: String,
            default() {
                return '';
            }
        },
        // isScale: {
        //     type: Boolean,
        //     default() {
        //         return false;
        //     }
        // },
        minZoom: {
            type: [Number, String],
            default: 1
        },
        maxZoom: {
            type: [Number, String],
            default: 6
        }
    },
    data() {
        return {
            imgEl: null,
            initialScale: 1,
            currentScale: 1,
			clickTimer:null,
			isScale:false,
        };
    },
    mounted() {
        if (!this.src) return false;
        let self = this;
        this.imgPositionAdjust(function(w, h) {
            self.imgEl = this;
            self.imgHeight = h;
            self.imgWidth = w;
            this.style.left = (window.innerWidth - w) / 2 + 'px';
            this.style.top = (window.innerHeight - h) / 2 + 'px';
            this.parentNode.style.display = 'block';
            if (w < window.innerWidth && h < window.innerHeight) {
                self.isScale = true;
            } else if (window.innerWidth / window.innerHeight < w / h) {
                self.initialScale = window.innerWidth / w;
                this.scaleX = this.scaleY = self.initialScale;
            } else {
                self.initialScale = window.innerHeight / h;
                this.scaleX = this.scaleY = self.initialScale;
            }
        });
    },
    methods: {
		mTab(){
			if(this.clickTimer)
				return
			this.clickTimer = setTimeout(()=>{
				this.$emit("mclick", 0);
			},300);
		},
		clear(){
			if(this.clickTimer){
				clearTimeout(this.clickTimer);
				this.clickTimer = null;
			}
		},
        imgPositionAdjust(onload) {
            let img = new Image();
            let imgEl = this.$el.lastChild;
            img.onload = function() {
                onload.call(imgEl, this.width, this.height);
                img.onload = null;
                img = null;
            };
            img.src = this.src;
        },
        getCriticalX(scale) {
            // 获取横向临界值
            return (this.imgWidth * scale - window.innerWidth) / 2;
        },
        getCriticalY(scale) {
            // 获取纵向临界值
            return (this.imgHeight * scale - window.innerHeight) / 2;
        },
        handleMultipointStart(e) {
			this.clear();
            this.currentScale = this.imgEl.scaleX;
        },
        handlePressMove(e) {
			this.clear();
            let el = this.imgEl;
            e.preventDefault();
            if (this.isScale) {
                el.translateX += e.deltaX / 3;
                el.translateY += e.deltaY / 3;
                this.$emit('enableSwipe');
                return;
            }

            if (
                el.scaleX / this.initialScale < 1.2 &&
                el.scaleX / this.initialScale > 0.8
            ) {
                this.$emit('enableSwipe');
                el.translateX += e.deltaX / 3;
                return;
            }

            let criticalX = this.getCriticalX(el.scaleX);
            let criticalY = this.getCriticalY(el.scaleY);

            // 实现超过临界值移动速度减缓
            let slowX = el.translateX > criticalX || el.translateX < -criticalX;
            let slowY = el.translateY > criticalY || el.translateY < -criticalY;

            if (slowX) {
                el.translateX += e.deltaX / 3;
                this.$emit('enableSwipe');
            } else el.translateX += e.deltaX;
            if (slowY) {
                el.translateY += e.deltaY / 3;
            } else el.translateY += e.deltaY;
        },
        handleTouchEnd(e) {
			this.clear();
            let el = this.imgEl;
            if (this.isScale || el.scaleX / this.initialScale < this.minZoom) {
                this.reset();
                return;
            }

            if (el.scaleX / this.initialScale > this.maxZoom) {
                new To(
                    el,
                    'scaleX',
                    this.initialScale * this.maxZoom,
                    500,
                    this.ease
                );
                new To(
                    el,
                    'scaleY',
                    this.initialScale * this.maxZoom,
                    500,
                    this.ease
                );
            }
            let criticalX = this.getCriticalX(el.scaleX);
            let criticalY = this.getCriticalY(el.scaleY);

            if (window.innerHeight >= this.imgHeight * el.scaleX) {
                new To(el, 'translateY', 0, 500, this.ease);
            } else {
                if (el.translateY > criticalY) {
                    new To(el, 'translateY', criticalY, 500, this.ease);
                } else if (el.translateY < -criticalY) {
                    new To(el, 'translateY', -criticalY, 500, this.ease);
                }
            }

            if (window.innerWidth >= this.imgWidth * el.scaleY) {
                new To(el, 'translateX', 0, 500, this.ease);
            } else {
                if (el.translateX > criticalX) {
                    new To(el, 'translateX', criticalX, 500, this.ease);
                } else if (el.translateX < -criticalX) {
                    new To(el, 'translateX', -criticalX, 500, this.ease);
                }
            }
        },
        handleDoubleTap(e) {
			this.clear();
            let el = this.imgEl;
            if (this.isScale) return;

            if (this.imgEl.scaleX !== this.initialScale) {
                this.reset();
            } else {
                let box = el.getBoundingClientRect();
                let y = window.innerHeight / 2 - e.changedTouches[0].pageY;
                let x = window.innerWidth / 2 - e.changedTouches[0].pageX;
                new To(el, 'scaleX', this.initialScale * 2, 500, this.ease);
                new To(el, 'scaleY', this.initialScale * 2, 500, this.ease);
                new To(el, 'translateX', x, 500, this.ease);
                new To(el, 'translateY', y, 500, this.ease);
            }
        },
        handlePinch(e, el) {
			this.clear();
            this.imgEl.scaleX = this.imgEl.scaleY = this.currentScale * e.zoom;
        },
        reset() {
            if (!this.imgEl) return;
            new To(this.imgEl, 'scaleX', this.initialScale, 500, this.ease);
            new To(this.imgEl, 'scaleY', this.initialScale, 500, this.ease);
            new To(this.imgEl, 'translateX', 0, 500, this.ease);
            new To(this.imgEl, 'translateY', 0, 500, this.ease);
        },
        ease(x) {
            return Math.sqrt(1 - Math.pow(x - 1, 2));
        }
    }
};
</script>

<style>
.img-vuer {
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
}
</style>

to.js

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
43
44
45

// alloy 的补间函数
var To = function(el, property, value, time, ease, onEnd, onChange) {
  var current = el[property];
  var dv = value - current;
  var beginTime = new Date();
  var self = this;
  var currentEase =
    ease ||
    function(a) {
      return a;
    };
  this.tickID = null;
  var toTick = function() {
    var dt = new Date() - beginTime;
    if (dt >= time) {
      el[property] = value;
      onChange && onChange(value);
      onEnd && onEnd(value);
      cancelAnimationFrame(self.tickID);
      self.toTick = null;
      return;
    }
    el[property] = dv * currentEase(dt / time) + current;
    self.tickID = requestAnimationFrame(toTick);
    onChange && onChange(el[property]);
  };
  toTick();
  To.List.push(this);
};

To.List = [];

To.stopAll = function() {
  for (var i = 0, len = To.List.length; i < len; i++) {
    cancelAnimationFrame(To.List[i].tickID);
  }
  To.List.length = 0;
};

To.stop = function(to) {
  cancelAnimationFrame(to.tickID);
};

export default To;

使用时调用方法, activeSrc 自己起的图片地址变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<template>
    <view   v-if="activeSrc"  style="height: 100vh; background-color: #000;">
        <img-over  :src="activeSrc"  :minZoom="0" :maxZoom="120"></img-over>
    </view>
</template>

<script >
    import ImgOver from '@/components/img-over/img-over';
    export default {
        components:{
            commonnavigatepage,ImgOver
        },
    }
</script>

1. 安装
   npm i graphql

2. 创建graphql后缀文件(主流编辑器都有带高亮提示了现在)
   编写内容如下

   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

   type itemRe { key:String value:String } type Query { q_test:String q_api_login(account:String!, password:String!):Boolean q_check_user(account:String!):String q_get_item(key:String!, account:String!):[itemRe] } type Mutation{ m_test:String m_register(account:String!, password:String!):Boolean m_modify_password(account:String!, password:String!):Boolean # 输入账号密码发送邮件,当前只支持@qq.com, @foxmail.com 的邮箱 m_send_email(fromemail:String!, password:String!, toemail:String!, title:String, txt:String, html:String):Boolean # value 最大不超过255个字符 m_set_item(key:String!, value:String!, account:String!):Boolean, m_remove_item(key:String!, account:String!):Boolean, } schema { query: Query mutation: Mutation }

3. 在express框架中使用

   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

   import * as express from "express"; import * as MApi from "./api_define/apilist"; import graphqlHTTP = require("express-graphql"); import {buildSchema,} from "graphql"; let path = require("path"); let app = express(); let fs = require("fs"); let data = fs.readFileSync(path.resolve("src/api_define/apidef.graphql")); data = data.toString(); let schema = buildSchema(data); let root = { q_test: () => "Query test ok", m_test: () => "Mutation test ok", // Query api q_api_login: async ({account, password}) => await MApi.api_login(account, password), q_check_user: async ({account}) => await MApi.check_user(account), q_get_item: async ({key, account}) => await MApi.api_get_item(key, account), // Mutation api m_register: async ({account, password}) => await MApi.api_register(account, password), m_modify_password: async ({account, password}) => await MApi.api_modify_password(account, password), m_send_email: async ({fromemail, password, toemail, title, txt, html}) => await MApi.api_send_email(fromemail, password, toemail, title, txt, html), m_set_item: async ({key, value, account}) => await MApi.api_set_item(key, value, account), m_remove_item: async ({key, account}) => await MApi.api_remove_item(key, account), }; app.use('/g', graphqlHTTP({ schema: schema, rootValue: root, graphiql: true, //控制显示控制台 })); let server = app.listen(8877, function () { // @ts-ignore let port = server.address().port; console.log("管理后台，访问地址为 http://127.0.0.1:%s", port) });

转载链接
另外一个人的网站