提交 0f49ca95 编写于 作者: fxy060608's avatar fxy060608

chore: merge

......@@ -352,9 +352,11 @@ const defaultState = {
fontFamily: 'sans-serif',
}
type ActionsItemType = string | number | boolean | undefined | Array<number>
type ActionsItemData = Array<ActionsItemType>
type ActionsItem = {
method: string
data: Array<string | number | boolean>
data: ActionsItemData | Array<ActionsItem>
}
type DefaultState = typeof defaultState
type Callback = (result: any) => void | undefined
......@@ -793,21 +795,20 @@ export class CanvasContext implements UniApp.CanvasContext {
;[...methods1, ...methods2].forEach(function (method) {
function get(method: string) {
// @ts-ignore
let _this = this as CanvasContext
switch (method) {
case 'fill':
case 'stroke':
return function () {
// @ts-ignore
this.actions.push({
_this.actions.push({
method: method + 'Path',
// @ts-ignore
data: [...this.path],
data: [..._this.path],
})
}
case 'fillRect':
return function (x: number, y: number, width: number, height: number) {
// @ts-ignore
this.actions.push({
_this.actions.push({
method: 'fillPath',
data: [
{
......@@ -819,8 +820,7 @@ export class CanvasContext implements UniApp.CanvasContext {
}
case 'strokeRect':
return function (x: number, y: number, width: number, height: number) {
// @ts-ignore
this.actions.push({
_this.actions.push({
method: 'strokePath',
data: [
{
......@@ -837,8 +837,7 @@ export class CanvasContext implements UniApp.CanvasContext {
if (typeof maxWidth === 'number') {
data.push(maxWidth)
}
// @ts-ignore
this.actions.push({
_this.actions.push({
method,
data,
})
......@@ -865,7 +864,7 @@ export class CanvasContext implements UniApp.CanvasContext {
dWidth = undefined
dHeight = undefined
}
var data
let data: ActionsItemData
function isNumber(e: any) {
return typeof e === 'number'
......@@ -889,16 +888,14 @@ export class CanvasContext implements UniApp.CanvasContext {
: isNumber(sWidth) && isNumber(sHeight)
? [imageResource, sx, sy, sWidth, sHeight]
: [imageResource, sx, sy]
// @ts-ignore
this.actions.push({
_this.actions.push({
method,
data,
})
}
default:
return function (...data: any) {
// @ts-ignore
this.actions.push({
return function (...data: ActionsItemData) {
_this.actions.push({
method,
data,
})
......@@ -909,29 +906,32 @@ export class CanvasContext implements UniApp.CanvasContext {
})
methods3.forEach(function (method) {
function get(method: string) {
// @ts-ignore
let _this = this as CanvasContext
switch (method) {
case 'setFillStyle':
case 'setStrokeStyle':
return function (color: string | Data) {
if (typeof color !== 'object') {
// @ts-ignore
this.actions.push({
_this.actions.push({
method,
data: ['normal', checkColor(color)],
})
} else {
// @ts-ignore
this.actions.push({
_this.actions.push({
method,
data: [color.type, color.data, color.colorStop],
data: [
color.type as ActionsItemType,
color.data as ActionsItemType,
color.colorStop as ActionsItemType,
],
})
}
}
case 'setGlobalAlpha':
return function (alpha: number) {
alpha = Math.floor(255 * parseFloat(alpha as unknown as string))
// @ts-ignore
this.actions.push({
_this.actions.push({
method,
data: [alpha],
})
......@@ -943,52 +943,41 @@ methods3.forEach(function (method) {
blur: number,
color: string
) {
color = checkColor(color) as any
// @ts-ignore
this.actions.push({
let _color = checkColor(color)
_this.actions.push({
method,
data: [offsetX, offsetY, blur, color],
})
// @ts-ignore
this.state.shadowBlur = blur
// @ts-ignore
this.state.shadowColor = color
// @ts-ignore
this.state.shadowOffsetX = offsetX
// @ts-ignore
this.state.shadowOffsetY = offsetY
_this.state.shadowBlur = blur
_this.state.shadowColor = _color
_this.state.shadowOffsetX = offsetX
_this.state.shadowOffsetY = offsetY
}
case 'setLineDash':
return function (pattern: Array<number> | undefined, offset: number) {
pattern = pattern || [0, 0]
offset = offset || 0
// @ts-ignore
this.actions.push({
_this.actions.push({
method,
data: [pattern, offset],
})
// @ts-ignore
this.state.lineDash = pattern
_this.state.lineDash = pattern
}
case 'setFontSize':
return function (fontSize: number) {
// @ts-ignore
this.state.font = this.state.font.replace(
_this.state.font = _this.state.font.replace(
/\d+\.?\d*px/,
fontSize + 'px'
)
// @ts-ignore
this.state.fontSize = fontSize
// @ts-ignore
this.actions.push({
_this.state.fontSize = fontSize
_this.actions.push({
method,
data: [fontSize],
})
}
default:
return function (...data: any) {
// @ts-ignore
this.actions.push({
return function (...data: ActionsItemData) {
_this.actions.push({
method,
data,
})
......
const defaultOption: Option = {
duration: 400,
timingFunction: 'linear',
delay: 0,
transformOrigin: '50% 50% 0',
}
type Option = UniApp.CreateAnimationOptions
type AnimatesArgs = string[]
type Action = {
animates: string[]
option: ReturnType<MPAnimation['_getOption']>
}
class MPAnimation implements UniApp.Animation {
actions: Array<Action>
currentTransform: Data
currentStepAnimates: Array<{ type: string; args: AnimatesArgs }>
option: Option
constructor(option: Option) {
this.actions = []
this.currentTransform = {}
this.currentStepAnimates = []
this.option = Object.assign({}, defaultOption, option)
}
_getOption(option: Option) {
const _option: {
transition: Option
transformOrigin: Option['transformOrigin']
} = {
transition: Object.assign({}, this.option, option),
transformOrigin: '',
}
_option.transformOrigin = _option.transition.transformOrigin
delete _option.transition.transformOrigin
return _option
}
_pushAnimates(type: string, args: AnimatesArgs) {
this.currentStepAnimates.push({
type: type,
args: args,
})
}
_converType(type: string) {
return type.replace(/[A-Z]/g, (text) => {
return `-${text.toLowerCase()}`
})
}
_getValue(value: string | number) {
return typeof value === 'number' ? `${value}px` : value
}
export() {
const actions = this.actions
this.actions = []
return {
actions,
}
}
step(option: Option) {
this.currentStepAnimates.forEach((animate) => {
if (animate.type !== 'style') {
this.currentTransform[animate.type] = animate
} else {
this.currentTransform[`${animate.type}.${animate.args[0]}`] = animate
}
})
this.actions.push({
animates: Object.values(this.currentTransform) as Action['animates'],
option: this._getOption(option),
})
this.currentStepAnimates = []
return this
}
'matrix': UniApp.Animation['matrix']
'matrix3d': UniApp.Animation['matrix3d']
'rotate': UniApp.Animation['rotate']
'rotate3d': UniApp.Animation['rotate3d']
'rotateX': UniApp.Animation['rotateX']
'rotateY': UniApp.Animation['rotateY']
'rotateZ': UniApp.Animation['rotateZ']
'scale': UniApp.Animation['scale']
'scale3d': UniApp.Animation['scale3d']
'scaleX': UniApp.Animation['scaleX']
'scaleY': UniApp.Animation['scaleY']
'scaleZ': UniApp.Animation['scaleZ']
'skew': UniApp.Animation['skew']
'skewX': UniApp.Animation['skewX']
'skewY': UniApp.Animation['skewY']
'translate': UniApp.Animation['translate']
'translate3d': UniApp.Animation['translate3d']
'translateX': UniApp.Animation['translateX']
'translateY': UniApp.Animation['translateY']
'translateZ': UniApp.Animation['translateZ']
'opacity': UniApp.Animation['opacity']
'backgroundColor': UniApp.Animation['backgroundColor']
'width': UniApp.Animation['width']
'height': UniApp.Animation['height']
'right': UniApp.Animation['right']
'top': UniApp.Animation['top']
'bottom': UniApp.Animation['bottom']
'left': UniApp.Animation['left']
}
const animateTypes1 = [
'matrix',
'matrix3d',
'rotate',
'rotate3d',
'rotateX',
'rotateY',
'rotateZ',
'scale',
'scale3d',
'scaleX',
'scaleY',
'scaleZ',
'skew',
'skewX',
'skewY',
'translate',
'translate3d',
'translateX',
'translateY',
'translateZ',
]
const animateTypes2 = ['opacity', 'backgroundColor']
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
animateTypes1.concat(animateTypes2, animateTypes3).forEach((type) => {
;(MPAnimation.prototype as any)[type] = function (...args: AnimatesArgs) {
let _this = this as MPAnimation
if (animateTypes2.concat(animateTypes3).includes(type)) {
_this._pushAnimates('style', [
_this._converType(type),
animateTypes3.includes(type) ? _this._getValue(args[0]) : args[0],
])
} else {
_this._pushAnimates(type, args)
}
return this
}
})
export function createAnimation(option: Option) {
return new MPAnimation(option)
}
......@@ -2762,18 +2762,19 @@ class CanvasContext {
}
[...methods1, ...methods2].forEach(function(method) {
function get(method2) {
let _this = this;
switch (method2) {
case "fill":
case "stroke":
return function() {
this.actions.push({
_this.actions.push({
method: method2 + "Path",
data: [...this.path]
data: [..._this.path]
});
};
case "fillRect":
return function(x, y, width, height) {
this.actions.push({
_this.actions.push({
method: "fillPath",
data: [
{
......@@ -2785,7 +2786,7 @@ class CanvasContext {
};
case "strokeRect":
return function(x, y, width, height) {
this.actions.push({
_this.actions.push({
method: "strokePath",
data: [
{
......@@ -2802,7 +2803,7 @@ class CanvasContext {
if (typeof maxWidth === "number") {
data.push(maxWidth);
}
this.actions.push({
_this.actions.push({
method: method2,
data
});
......@@ -2819,7 +2820,7 @@ class CanvasContext {
dWidth = void 0;
dHeight = void 0;
}
var data;
let data;
function isNumber(e2) {
return typeof e2 === "number";
}
......@@ -2834,14 +2835,14 @@ class CanvasContext {
dWidth,
dHeight
] : isNumber(sWidth) && isNumber(sHeight) ? [imageResource, sx, sy, sWidth, sHeight] : [imageResource, sx, sy];
this.actions.push({
_this.actions.push({
method: method2,
data
});
};
default:
return function(...data) {
this.actions.push({
_this.actions.push({
method: method2,
data
});
......@@ -2852,64 +2853,69 @@ class CanvasContext {
});
methods3.forEach(function(method) {
function get(method2) {
let _this = this;
switch (method2) {
case "setFillStyle":
case "setStrokeStyle":
return function(color) {
if (typeof color !== "object") {
this.actions.push({
_this.actions.push({
method: method2,
data: ["normal", checkColor(color)]
});
} else {
this.actions.push({
_this.actions.push({
method: method2,
data: [color.type, color.data, color.colorStop]
data: [
color.type,
color.data,
color.colorStop
]
});
}
};
case "setGlobalAlpha":
return function(alpha) {
alpha = Math.floor(255 * parseFloat(alpha));
this.actions.push({
_this.actions.push({
method: method2,
data: [alpha]
});
};
case "setShadow":
return function(offsetX, offsetY, blur, color) {
color = checkColor(color);
this.actions.push({
let _color = checkColor(color);
_this.actions.push({
method: method2,
data: [offsetX, offsetY, blur, color]
});
this.state.shadowBlur = blur;
this.state.shadowColor = color;
this.state.shadowOffsetX = offsetX;
this.state.shadowOffsetY = offsetY;
_this.state.shadowBlur = blur;
_this.state.shadowColor = _color;
_this.state.shadowOffsetX = offsetX;
_this.state.shadowOffsetY = offsetY;
};
case "setLineDash":
return function(pattern, offset) {
pattern = pattern || [0, 0];
offset = offset || 0;
this.actions.push({
_this.actions.push({
method: method2,
data: [pattern, offset]
});
this.state.lineDash = pattern;
_this.state.lineDash = pattern;
};
case "setFontSize":
return function(fontSize) {
this.state.font = this.state.font.replace(/\d+\.?\d*px/, fontSize + "px");
this.state.fontSize = fontSize;
this.actions.push({
_this.state.font = _this.state.font.replace(/\d+\.?\d*px/, fontSize + "px");
_this.state.fontSize = fontSize;
_this.actions.push({
method: method2,
data: [fontSize]
});
};
default:
return function(...data) {
this.actions.push({
_this.actions.push({
method: method2,
data
});
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册