问题总结

vue中引入assets里面图片的问题？

当路径的文件名需要拼接变量的时候，可使用require()引入。

git命令

tag

// 控制台打出当前仓库的所有标签 git tag

// 打标签，tag 自定义标识 版本id -m "备注" git tag v1.00 440376 -m "2020第一版"

| 查看版本id git rev-parse HEAD ，查看段版本id git rev-parse --short HEAD

// 将v1.00标签提交到git服务器 git push origin v1.00

// 将本地所有标签一次性提交到git服务器 git push origin --tags

// 切换标签 git checkout tagname

// 当前目录全部代码切换到v1.00时的代码 // git checkout v1.00

// 删除标签 git tag -d v1.00

// 删除git服务器上的标签 git push origin :v1.00

切割图片相关

canvas 默认300 X 150

canvas的width和height跟style中定义的width和height是不同的，canvas标签的width和height是画布实际宽度和高度， 绘制的图形都是在这个上面。style的width和height是canvas在浏览器中被渲染的高度和宽度。

使用CSS设置画布的大小会导致画布按比例缩放你设置的值（CSS设置的宽高和300 * 150 的比值）

例如，用CSS设置canvas 的宽高为450300，对应默认的画布大小300 * 150 ，宽高比分别为 1.5和2 ，所以画布中100100的图片会显示为宽1001.5 150px， 高1002 200px。

改变canvas 的默认大小

// 方法一
<canvas width="100px" height="100px"></canvas>

// 方法二，通过js的方法实现
canvas.width="100"
canvas.height="100"

JS更新DOM后，页面没有及时渲染的问题？（JS线程阻塞和解决办法）

两个概念：

1. js是同步加载的
2. 浏览器执行js程序，高于页面的渲染

于是就出现了js更新DOM，页面不能及时渲染的问题。

例如：

document.body.html('helloworld')

// 程序
$.ajax({
  ...
})

// 运行结果会在ajax执行完毕后，再去渲染页面

vue 中引入图片

assets中的图片在项目编译中会被webpack处理解析为模块依赖，支持相对路径形式，

在script 中引入图片

// 必须require进来 或者 引入网络地址
data() {
  return {
    img: require('../assets/1.jpg'),
    img2: 'https://baidu.com/jpg/2.jpg'
  }
}

保证初始化后，一定可以还原

将问题一般化，在M * N 的方格里有 M * N - 1 个不同元素和一个空元素，只有空元素可以和上下左右相邻的元素交换位置。 M * N 方格中M * N - 1个元素和一个空元素的位置确定一个图形。

拼图游戏的问题是：一个图形经过一连串的交换能否得到另一个图形，如何得到？

从交换方式的可逆性看出这种关系满足等价三性质（等价矩阵），如果图形A通过交换变成图形B，则称它们是等价的。

**定理1：**图形A和图形B等价的充分必要条件是图形A的排列的逆序数加上0元素行号和列号的奇偶性等于图形B的排列的 逆序数加上0元素行号和列号的奇偶性。为了方便 表述，把图形排列的逆序数加上0元素行号和列号的奇偶性称为图形的奇偶性。

例如：图形A 展开的排列1 3 2 6 0 5 4 7 8, 它的逆序数为8，0元素行号为2，列号为2。逆序数加行号，列号的奇偶性为偶。图B 展开的排列1 2 3 4 5 6 7 8 0，它的逆序数为8，0元素行号为3，列号为3。逆序数加行号，列号的奇偶性为偶，两个图形的奇偶性相同，根据定理1，判断它们等价。

由此，得出要计算两个排列的奇偶性，只有两个排列的奇偶性相同的情况下，才可以恢复图像。

v1.01 bug

1. 重新开始后，右下角空白未清空

v1.03

预计：加入本地图片选择。本地图片裁剪。