Skip to content

Commit cb7418e

Browse files
author
hujinliang
committed
feat(Web): 支持可选的width/height
1 parent 2ef6f61 commit cb7418e

7 files changed

Lines changed: 61 additions & 22 deletions

File tree

‎web/demo/src/components/HelloWorld.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default {
3434
// 素材配置json对象
3535
config: config,
3636
width: 900,
37-
height: 600,
37+
height: 400,
3838
// 同素材生成工具中配置的保持一致
3939
fps: 20,
4040
// 是否循环

‎web/dist/type.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ export interface VapConfig {
55
[key: string]: any;
66
};
77
fps?: number;
8+
width?: number;
9+
height?: number;
810
loop: boolean;
911
mute?: boolean;
1012
precache?: boolean;

‎web/dist/vap.js‎

Lines changed: 50 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,37 @@
244244

245245
var possibleConstructorReturn = _possibleConstructorReturn;
246246

247+
var getPrototypeOf$1 = createCommonjsModule(function (module) {
248+
function _getPrototypeOf(o) {
249+
module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
250+
return o.__proto__ || Object.getPrototypeOf(o);
251+
};
252+
return _getPrototypeOf(o);
253+
}
254+
255+
module.exports = _getPrototypeOf;
256+
});
257+
258+
var _typeof_1$1 = createCommonjsModule(function (module) {
259+
function _typeof(obj) {
260+
"@babel/helpers - typeof";
261+
262+
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
263+
module.exports = _typeof = function _typeof(obj) {
264+
return typeof obj;
265+
};
266+
} else {
267+
module.exports = _typeof = function _typeof(obj) {
268+
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
269+
};
270+
}
271+
272+
return _typeof(obj);
273+
}
274+
275+
module.exports = _typeof;
276+
});
277+
247278
var runtime_1 = createCommonjsModule(function (module) {
248279
/**
249280
* Copyright (c) 2014-present, Facebook, Inc.
@@ -994,7 +1025,7 @@
9941025
}
9951026
});
9961027

997-
var regenerator = runtime_1;
1028+
var D__project_vapSource_web_node_modules__babel_runtime_regenerator = runtime_1;
9981029

9991030
/*! *****************************************************************************
10001031
Copyright (c) Microsoft Corporation.
@@ -1050,8 +1081,8 @@
10501081
createClass(FrameParser, [{
10511082
key: "init",
10521083
value: function init() {
1053-
return __awaiter(this, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
1054-
return regenerator.wrap(function _callee$(_context) {
1084+
return __awaiter(this, void 0, void 0, /*#__PURE__*/D__project_vapSource_web_node_modules__babel_runtime_regenerator.mark(function _callee() {
1085+
return D__project_vapSource_web_node_modules__babel_runtime_regenerator.wrap(function _callee$(_context) {
10551086
while (1) {
10561087
switch (_context.prev = _context.next) {
10571088
case 0:
@@ -1121,10 +1152,10 @@
11211152

11221153
var src = this.srcData = {};
11231154
return Promise.all((dataJson.src || []).map(function (item) {
1124-
return __awaiter(_this, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee2() {
1155+
return __awaiter(_this, void 0, void 0, /*#__PURE__*/D__project_vapSource_web_node_modules__babel_runtime_regenerator.mark(function _callee2() {
11251156
var _this2 = this;
11261157

1127-
return regenerator.wrap(function _callee2$(_context2) {
1158+
return D__project_vapSource_web_node_modules__babel_runtime_regenerator.wrap(function _callee2$(_context2) {
11281159
while (1) {
11291160
switch (_context2.prev = _context2.next) {
11301161
case 0:
@@ -1261,7 +1292,7 @@
12611292
} else if (typeof fontStyle == 'string') {
12621293
ctx.font = fontStyle;
12631294
ctx.fillStyle = color;
1264-
} else if (_typeof_1(fontStyle) == 'object') {
1295+
} else if (_typeof_1$1(fontStyle) == 'object') {
12651296
ctx.font = fontStyle['font'] || getFontStyle();
12661297
ctx.fillStyle = fontStyle['color'] || color;
12671298
} else if (typeof fontStyle == 'function') {
@@ -1722,7 +1753,7 @@
17221753
return VapVideo;
17231754
}();
17241755

1725-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
1756+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = getPrototypeOf$1(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf$1(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
17261757

17271758
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
17281759
var PER_SIZE = 9;
@@ -1781,14 +1812,14 @@
17811812

17821813
_this2.options.fps = _this2.vapFrameParser.config.info.fps || 30;
17831814

1784-
get(getPrototypeOf(WebglRenderVap.prototype), "play", _this2).call(_this2);
1815+
get(getPrototypeOf$1(WebglRenderVap.prototype), "play", _this2).call(_this2);
17851816
})["catch"](function (e) {
17861817
_this2.vapFrameParser = null;
17871818
console.error('[Alpha video] parse vap frame error.', e);
17881819
return _this2;
17891820
});
17901821
} else {
1791-
get(getPrototypeOf(WebglRenderVap.prototype), "play", this).call(this);
1822+
get(getPrototypeOf$1(WebglRenderVap.prototype), "play", this).call(this);
17921823
}
17931824

17941825
return this;
@@ -1801,6 +1832,9 @@
18011832
vertexShader = this.vertexShader,
18021833
fragmentShader = this.fragmentShader,
18031834
program = this.program;
1835+
var _this$options = this.options,
1836+
width = _this$options.width,
1837+
height = _this$options.height;
18041838

18051839
if (!canvas) {
18061840
canvas = document.createElement('canvas');
@@ -1810,8 +1844,8 @@
18101844
var _vapFrameParser$confi = vapFrameParser.config.info,
18111845
w = _vapFrameParser$confi.w,
18121846
h = _vapFrameParser$confi.h;
1813-
canvas.width = w;
1814-
canvas.height = h;
1847+
canvas.width = width || w;
1848+
canvas.height = height || h;
18151849
this.container.appendChild(canvas);
18161850

18171851
if (!gl) {
@@ -1821,7 +1855,7 @@
18211855
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
18221856
}
18231857

1824-
gl.viewport(0, 0, w, h);
1858+
gl.viewport(0, 0, canvas.width, canvas.height);
18251859

18261860
if (!vertexShader) {
18271861
vertexShader = this.initVertexShader(gl);
@@ -1982,7 +2016,7 @@
19822016
options = this.options;
19832017

19842018
if (!gl) {
1985-
get(getPrototypeOf(WebglRenderVap.prototype), "drawFrame", this).call(this, _, info);
2019+
get(getPrototypeOf$1(WebglRenderVap.prototype), "drawFrame", this).call(this, _, info);
19862020

19872021
return;
19882022
}
@@ -2038,13 +2072,13 @@
20382072

20392073
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
20402074

2041-
get(getPrototypeOf(WebglRenderVap.prototype), "drawFrame", this).call(this, _, info);
2075+
get(getPrototypeOf$1(WebglRenderVap.prototype), "drawFrame", this).call(this, _, info);
20422076
} // 清理数据,为下一次播放做准备
20432077

20442078
}, {
20452079
key: "clear",
20462080
value: function clear() {
2047-
get(getPrototypeOf(WebglRenderVap.prototype), "clear", this).call(this);
2081+
get(getPrototypeOf$1(WebglRenderVap.prototype), "clear", this).call(this);
20482082

20492083
var gl = this.gl; // 清除界面，解决连续播放时，第一帧是上一个mp4最后一帧的问题
20502084

@@ -2054,7 +2088,7 @@
20542088
}, {
20552089
key: "destroy",
20562090
value: function destroy() {
2057-
get(getPrototypeOf(WebglRenderVap.prototype), "destroy", this).call(this);
2091+
get(getPrototypeOf$1(WebglRenderVap.prototype), "destroy", this).call(this);
20582092

20592093
var canvas = this.canvas,
20602094
gl = this.gl,

‎web/dist/vap.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "video-animation-player",
3-
"version": "1.0.4",
3+
"version": "1.0.5",
44
"description": "webgl动画特效组件",
55
"main": "dist/vap.js",
66
"scripts": {

‎web/src/type.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ export interface VapConfig {
33
src: string;
44
config: string | { [key: string]: any };
55
fps?: number;
6+
width?: number;
7+
height?: number;
68
// 循环播放
79
loop: boolean;
810
mute?: boolean;

‎web/src/webgl-render-vap.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,14 @@ export default class WebglRenderVap extends VapVideo {
7878

7979
initWebGL() {
8080
let { canvas, gl, vertexShader, fragmentShader, program } = this;
81+
const { width, height } = this.options;
8182
if (!canvas) {
8283
canvas = document.createElement('canvas');
8384
}
8485
const { vapFrameParser } = this;
8586
const { w, h } = vapFrameParser.config.info;
86-
canvas.width = w;
87-
canvas.height = h;
87+
canvas.width = width || w;
88+
canvas.height = height || h;
8889
this.container.appendChild(canvas);
8990

9091
if (!gl) {
@@ -93,7 +94,7 @@ export default class WebglRenderVap extends VapVideo {
9394
gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
9495
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
9596
}
96-
gl.viewport(0, 0, w, h);
97+
gl.viewport(0, 0, canvas.width, canvas.height);
9798

9899
if (!vertexShader) {
99100
vertexShader = this.initVertexShader(gl);

0 commit comments

Comments
 (0)