Martin

前言

最近在搞一个图形编辑类的前端项目，其中底层涉及到大量矩阵变换，于是总结心得遂成此文。

先引出矩阵

2D 变换矩阵主要形式如下：

下面我们来对此矩阵进行分解。

介绍

此插件 html2canvas 可以说是一个 js 截屏插件。原理就像它名字所描述的一样：将 HTML 元素节点转换为 canvas 图层。

转成 canvas 图片后，我们就可以对它进行各种操作，包括展示、编辑还有图片导出。

简单使用

步骤：

1. 获取目标元素节点
2. 利用 html2canvas 生成 canvas 图层
3. 按需使用该图层

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

// 比如最简单的展示
let target = document.querySelector('.containter')

html2canvas(target).then(canvas => {
    document.appendChild(canvas)
})

// 或者导出 base64 图片
html2canvas(target).then(canvas => {
    console.log(canvas.toDataURL('image/png'))
    // data:image/png;base64,.......
})

让我们直接进入正题，这三剑客就是指 $props、$attrs、$listeners。

API 定义

先看官方文档定义然后再慢慢展开：

vm.$props: 当前组件接收到的 props 对象。
vm.$attrs: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。
vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。

添加 jsx 支持

对于 Babel7

安装 babel 依赖：

1

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

之后添加 preset 到 .babelrc 文件中：

1
2
3

{
  "presets": ["@vue/babel-preset-jsx"]
}

原题

这是一道考察单向链表操作的题目：leetcode61

给定一个链表，旋转链表，将链表每个节点向右移动 k 个位置，其中 k 是非负数。

例如：

1
2
3
4
5

输入: 1->2->3->4->5->NULL, k = 2
输出: 4->5->1->2->3->NULL
解释:
向右旋转 1 步: 5->1->2->3->4->NULL
向右旋转 2 步: 4->5->1->2->3->NULL