基础学习：
前端最基础的就是 HTML , CSS 和 JavaScript 。
网页设计：HTML和CSS基础知识的学习
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
动态交互：JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
createAnimation,
Tool,
createUtils
} from ‘vue-picture-cut’;
组件：VuePictureCut、VuePictureCutMask、VuePictureCutMenu。工具类：Bezier、createAnimation、Tool、createUtils。
1、VuePictureCut组件
=================
slot插槽：default、menu
使用：
/demo/demo1.html
/demo/demo2.html
<vue-picture-cut
ref=“pictureCut”
:src=“src”
:magnification=“magnification”
:init-angle=“initAngle”
:msk-option=“mskOption”
:max-pixel=“maxPixel”
:encoder-options=“encoderOptions”
:format=“format”
:rotate-control=“rotateControl”
:menu-position=“menuPosition”
:menu-thickness=“menuThickness”
:background-color=“backgroundColor”
@on-change=“onChange”
/>
属性：
- src：
类型：string默认：null描述：图片链接
- magnification：
类型：number默认：1.5描述：画布绘制缩放率，取值大于0，取值越大绘制的逻辑像素越高
- initAngle：
类型：number必须：非必须描述：载入图片的初始旋转角度
- maxPixel：
类型：number必须：非必须描述：导出图片的宽高中较长边的像素，不传时则依据实际图片大小自适应。
- encoderOptions：
类型：number必须：非必须描述：导出图片的压缩率，不传时按0.8计算，取值范围0~1。
- format：
类型：string默认：false描述：导出图片的格式，不传时导出格式为“image/jpeg”，其值可以为“image/png”等浏览器支持格式。
- mskOption：
类型：object默认：{ width: 1, height: 1, isRound: false, resize: true}描述：width：number 裁剪框比例宽height：number 裁剪框比例高isRound：boolean 矩形true，椭圆falseresize：boolean 裁剪框大小是否可通过拖动改变大小color：string 遮罩颜色borderColor：string 裁剪框颜色
- rotateControl：
类型：boolean默认：false描述：是否显示旋转控件。
- menuPosition：
类型：string默认：bottom描述：菜单栏位置，取值：top、bottom、left、right。
- menuThickness：
类型：number必须：非必须描述：menuPosition取top、bottom时表示菜单栏高度，menuPosition取left、right时表示菜单栏高度宽度，取值大于0，等于0时隐藏菜单栏。
- backgroundColor：
类型：string必须：非必须描述：组件背景色。
事件：
- onChange ({ blob, base64 })：监听图片最终裁剪导出的事件
blob：导出图片的Blob对象，可用于图片上传base64：导出图片的base64字符串，可用于图片上传
方法：
- this.$refs[‘pictureCut’].scale(zoom)：缩放图片
参数zoom：缩放后的尺寸和当前尺寸的比例，取值大于0，0到1之间缩小，大于1放大。
2、VuePictureCutMask组件
=====================
VuePictureCutMask是VuePictureCut默认slot插槽组件，是控制遮罩裁剪框相关的组件，使用它与不使用它效果一样。
使用：
/demo/demo3.html
<vue-picture-cut
:src=“src”
:magnification=“magnification”
:init-angle=“initAngle”
:rotate-control=“rotateControl”
:max-pixel=“maxPixel”
:encoder-options=“encoderOptions”
:format=“format”
:background-color=“backgroundColor”
@on-change=“onChange”
<vue-picture-mask
:width=“width”
:height=“height”
:is-round=“isRound”
:resize=“resize”
:color=“color”
:border-color=“borderColor”
/>
属性：
- width：
类型：number默认：1描述：裁剪框比例宽
- height：
类型：number默认：1描述：裁剪框比例高
- isRound：
类型：boolean默认：false描述：矩形true，椭圆false
- resize：
类型：boolean默认：false描述：裁剪框大小是否可通过拖动改变大小
- color：
类型：string必须：非必须描述：遮罩颜色
- borderColor：
类型：string必须：非必须描述：裁剪框颜色
3、VuePictureCutMenu组件
=====================
菜单栏组件，效果参见Demo。
使用：
/demo/demo4.html
/demo/demo5.html
<vue-picture-cut
:src=“src”
:magnification=“magnification”
:init-angle=“initAngle”
:rotate-control=“rotateControl”
:msk-option=“mskOption”
@on-change=“cutChange”
<vue-picture-menu
slot=“menu”
:cancel=“false”
:max-pixel=“maxPixel”
:encoder-options=“encoderOptions”
:format=“format”
:theme=“theme”
confirm-name=“Ok”
cancel-name=“Cancel”
size-auto-name=“auto”
size-raw-name=“raw”
menu-rotate-name=“Rotate”
@on-change=“onChange”
@on-cancel=“onCancel”
/>
属性：
- cancel：
类型：boolean默认：false描述：是否显示取消按钮。
- maxPixel：
类型：number必须：非必须描述：导出图片的宽高中较长边的像素，不传时则依据实际图片大小自适应。
- encoderOptions：
类型：number必须：非必须描述：导出图片的压缩率，不传时按0.8计算，取值范围0~1。
- format：
类型：string默认：false描述：导出图片的格式，不传时导出格式为“image/jpeg”，其值可以为“image/png”等浏览器支持格式。
- theme：
类型：string默认：'default’描述：菜单栏主题。取值：‘default’、‘dark’、‘gray’
- confirmName：
类型：string默认：'Ok’描述：确定按钮的文字
- cancelName：
类型：string默认：'cancel’描述：取消按钮的文字
- sizeAutoName：
类型：string默认：'auto’描述：菜单栏按钮文字
- sizeRawName：
类型：string默认：'raw’描述：菜单栏按钮文字
- menuRotateName：
类型：string默认：'Rotate’描述：菜单栏按钮文字
- root：
类型：object必须：不通过slot方式在外部使用时，必须传。描述：取值为VuePictureCut实例
事件：
- onChange ({ blob, base64 })：监听图片最终裁剪导出的事件，即点击确认按钮
blob：导出图片的Blob对象，可用于图片上传base64：导出图片的base64字符串，可用于图片上传
- onCancel ()：监听点击取消按钮
4、Bezier对象
==========
import { Bezier } from ‘vue-picture-cut’;
const bezier = Bezier();
bezier.setOpt(Bezier.BEZIER[‘ease-in-out’]);
const y = bezier.getPoint(0.5);
console.log(y);
(1) 静态属性BEZIER，是一个键值对，包含一些预设值
=============================
键
值
说明
linear | [0.0, 0.0, 1.0, 1.0] | 线性过渡 |
ease | [0.25, 0.1, 0.25, 1.0] | 平滑过渡 |
ease-in | [0.42, 0, 1.0, 1.0] | 由慢到快 |
ease-out | [0, 0, 0.58, 1.0] | 由快到慢 |
ease-in-out | [0.42, 0, 0.58, 1.0] | 由慢到快再到慢 |
(2) 构造函数
========
一个无参的构造函数，内部调用了setOptByString(‘ease’)方法
(3) 方法
======
方法名
说明
参数
返回值
setOpt | 设置贝塞尔曲线类型 | (arg: string , ParamsInterface = 'ease') | Bezier对象本身 |
setOptByString | 设置贝塞尔曲线类型 | BEZIER预设值(arg = 'ease') | Bezier对象本身 |
setOptByArr | 设置贝塞尔曲线类型 | (x1: number, y1: number, x2: number, y2: number) | Bezier对象本身 |
getPoint | 返回x坐标对应的y坐标值 | (x: number) 0~1之间 | 对应y坐标，0~1之间 |
(4) 参数ParamsInterface说明
=======================
ParamsInterface为包含4个number类型的数组。
5、 createAnimation方法
====================
import { createAnimation } from ‘vue-picture-cut’;
const animation = createAnimation(option);
createAnimation会返回一个Animation对象
(1) 参数option
============
参数
说明
类型
可选值
必需
默认值
duration | 动画持续时间，单位毫秒 | number | —— | false | 1000 |
timing | 动画的过渡类型 | string、number[] | Bezier.BEZIER中的值，或者ParamsInterface类型 | false | ease |
delay | 动画的延迟时间，单位毫秒 | number | —— | false | 0 |
iteration | 动画循环次数，infinite为无限循环 | number、string | 'infinite'或正整数 | false | 0 |
direction | 动画在循环中是否反向运动 | string | normal(默认，正向运动)；reverse(反向运行)；alternate(先正向，后反向，并交替)；alternate-reverse(先反向，后正向，并交替)。 | false | normal |
change | 回调函数，接收参数x，x在0~1之间，动画在这里处理 | Function | —— | false | —— |
end | 回调函数，动画结束时执行 | Function | —— | false | —— |
(2) Animation对象方法
=================
方法名
说明
参数
返回值
start | 开始动画 | —— | Animation对象本身 |
abort | 中止动画 | —— | —— |
6、 Tool对象
=========
import { Tool } from ‘vue-picture-cut’;
Tool.loadImg(‘http://xxx.xxx.xxx/xxx.jpg’)
.then(image => {
// 加载图片成功
// image为Image对象
}, () => {
// 加载图片失败
});
包含方法
====
- loadImg (src: string): Promise
描述：载入图片参数 src：图片的链接返回 Promise：略
- rotatePoint(x: number, y: number, angle: number): Point
描述：将一个点绕原点旋转angle度后，计算新的点的坐标参数 x：点的x坐标参数 y：点的y坐标参数 angle：旋转角度返回 Point：{x: number, y: number} 新的点
- clipBy (img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = ‘image/jpeg’, pathDone?: PathDone): string
描述：根据坐标剪裁图像参数 img：Image对象参数 width：导出图片的宽度（px）参数 height：导出图片的高度（px）参数 showRect：RectFull对象参数 encoderOptions：压缩率参数 format：导出图片的格式’image/jpeg’、'image/png’等参数 pathDone：自定义路径的方法PathDone返回 String：base64
- clipByRound (img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = ‘image/jpeg’): string
描述：根据坐标内切圆剪裁图像参数 img：略参数 width：略参数 height：略参数 showRect：略参数 encoderOptions：略参数 format：略返回 String：base64
- clipByMax (img: HTMLImageElement, max = 2000, encoderOptions = 1): ClipResult | void
描述：若图片宽或高大于max，则压缩图片参数 img：略参数 max：略参数 encoderOptions：略返回 ClipResult | void：返回ClipResult对象或undefined
- base64ToBlob (base64: string, format = ‘image/jpeg’): Blob | null
描述：将base64转Blob对象参数 base64：略参数 format：base64的格式返回 Blob | null：返回Blob对象或null
- getEllipseRectByRect(w: number, h: number, angle: number): Rect
描述：将一个正矩形的内切椭圆旋转angle度，计算该椭圆的外接正矩形。(假设矩形中心为原点)参数 w：初始正矩形宽参数 h：初始正矩形高参数 angle：逆时针旋转角度返回 Rect：返回Rect对象
- getRectByRect(w: number, h: number, angle: number): Rect
描述：将一个正矩形旋转angle度，计算该矩形的外接正矩形。(假设矩形中心为原点)参数 w：初始正矩形宽参数 h：初始正矩形高参数 angle：逆时针旋转角度返回 Rect：返回Rect对象
7、 createUtils方法
================
<input type=“file” accept=“image/*” @change=“inputChange”/>
<button @click=“doCut”>裁剪
扫一扫
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
