FilesExpand file tree

 develop

/

pointercorrect.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

124 lines (106 loc) · 3.44 KB

 develop

/

pointercorrect.js

Copy path

Top

File metadata and controls

• Code
• Blame

124 lines (106 loc) · 3.44 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

export const LetterBoxType = {

Vertical: 0,

Horizontal: 1

};

export class PointerCorrector {

/**

* @param {Number} videoWidth

* @param {Number} videoHeight

* @param {HTMLVideoElement} videoElem

*/

constructor(videoWidth, videoHeight, videoElem) {

this.reset(videoWidth, videoHeight, videoElem);

}

/**

* @param {Number[]} position MouseEvent.clientX, MouseEvent.clientY

* @returns {Number[]}

*/

map(position) {

var rect = this._videoElem.getBoundingClientRect();

const _position = new Array(2);

// (1) set origin point to zero

_position[0] = position[0] - rect.left;

_position[1] = position[1] - rect.top;

// (2) translate Unity coordinate system (reverse y-axis)

_position[1] = rect.height - _position[1];

// (3) add offset of letterbox

_position[0] -= this._contentRect.x;

_position[1] -= this._contentRect.y;

// (4) mapping element rectangle to video rectangle

_position[0] = _position[0] / this._contentRect.width * this._videoWidth;

_position[1] = _position[1] / this._contentRect.height * this._videoHeight;

return _position;

}

/**

* @param {Number} videoWidth

*/

setVideoWidth(videoWidth) {

this._videoWidth = videoWidth;

this._reset();

}

/**

* @param {Number} videoHeight

*/

setVideoHeight(videoHeight) {

this._videoHeight = videoHeight;

this._reset();

}

/**

* @param {HTMLVideoElement} videoElem

*/

setRect(videoElem) {

this._videoElem = videoElem;

this._reset();

}

/**

* @param {Number} videoWidth

* @param {Number} videoHeight

* @param {HTMLVideoElement} videoElem

*/

reset(videoWidth, videoHeight, videoElem) {

this._videoWidth = videoWidth;

this._videoHeight = videoHeight;

this._videoElem = videoElem;

this._reset();

}

get letterBoxType() {

const videoRatio = this._videoHeight / this._videoWidth;

var rect = this._videoElem.getBoundingClientRect();

const rectRatio = rect.height / rect.width;

return videoRatio > rectRatio ? LetterBoxType.Vertical : LetterBoxType.Horizontal;

}

get letterBoxSize() {

var rect = this._videoElem.getBoundingClientRect();

switch(this.letterBoxType) {

case LetterBoxType.Horizontal: {

const ratioWidth = rect.width / this._videoWidth;

const height = this._videoHeight * ratioWidth;

return (rect.height - height) * 0.5;

}

case LetterBoxType.Vertical: {

const ratioHeight = rect.height / this._videoHeight;

const width = this._videoWidth * ratioHeight;

return (rect.width - width) * 0.5;

}

}

throw 'invalid status';

}

/**

* Returns rectangle for displaying video with the origin at the left-top of the element.

* Not considered applying CSS like `object-fit`.

* @returns {Object}

*/

get contentRect() {

const letterBoxType = this.letterBoxType;

const letterBoxSize = this.letterBoxSize;

var rect = this._videoElem.getBoundingClientRect();

const x = letterBoxType == LetterBoxType.Vertical ? letterBoxSize : 0;

const y = letterBoxType == LetterBoxType.Horizontal ? letterBoxSize : 0;

const width = letterBoxType == LetterBoxType.Vertical ? rect.width - letterBoxSize * 2 : rect.width;

const height = letterBoxType == LetterBoxType.Horizontal ? rect.height - letterBoxSize * 2 : rect.height;

return {x: x, y: y, width: width, height: height};

}

_reset() {

this._contentRect = this.contentRect;

}

}