mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-03-26 22:49:01 +08:00
[ts][player] Fixed hover detection.
This commit is contained in:
parent
bf00309ad1
commit
bd56277432
@ -9643,6 +9643,8 @@ var spine;
|
||||
settingsButton.onclick = function () {
|
||||
_this.showSettingsDialog();
|
||||
};
|
||||
var oldCanvasWidth = 0;
|
||||
var oldCanvasHeight = 0;
|
||||
fullscreenButton.onclick = function () {
|
||||
var doc = document;
|
||||
if (doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) {
|
||||
@ -9665,6 +9667,8 @@ var spine;
|
||||
player.mozRequestFullScreen();
|
||||
else if (player.msRequestFullscreen)
|
||||
player.msRequestFullscreen();
|
||||
oldCanvasWidth = _this.canvas.width;
|
||||
oldCanvasHeight = _this.canvas.height;
|
||||
}
|
||||
};
|
||||
window.onresize = function () {
|
||||
@ -9770,6 +9774,7 @@ var spine;
|
||||
var bg = new spine.Color().setFromString(this.config.backgroundColor);
|
||||
gl.clearColor(bg.r, bg.g, bg.b, bg.a);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
this.loadingScreen.backgroundColor.setFromColor(bg);
|
||||
this.loadingScreen.draw(this.assetManager.isLoadingComplete());
|
||||
if (this.assetManager.isLoadingComplete() && this.skeleton == null)
|
||||
this.loadSkeleton();
|
||||
@ -10006,18 +10011,15 @@ var spine;
|
||||
handleHover();
|
||||
}
|
||||
});
|
||||
var mouseOverChildren = false;
|
||||
canvas.onmouseover = function (ev) {
|
||||
mouseOverChildren = false;
|
||||
};
|
||||
canvas.onmouseout = function (ev) {
|
||||
if (ev.relatedTarget == null) {
|
||||
mouseOverChildren = false;
|
||||
var mouseOverChildren = true;
|
||||
document.addEventListener("mousemove", function (ev) {
|
||||
if (ev instanceof MouseEvent) {
|
||||
var rect = _this.playerControls.getBoundingClientRect();
|
||||
var x = ev.clientX - rect.left;
|
||||
var y = ev.clientY - rect.top;
|
||||
mouseOverChildren = x >= 0 && x <= _this.playerControls.clientWidth && y >= 0 && y <= _this.playerControls.clientHeight;
|
||||
}
|
||||
else {
|
||||
mouseOverChildren = isContained(_this.dom, ev.relatedTarget);
|
||||
}
|
||||
};
|
||||
});
|
||||
var cancelId = 0;
|
||||
var handleHover = function () {
|
||||
if (!_this.config.showControls)
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -15,7 +15,7 @@ body {
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="container" style="width: 100%; height: 100vh;"></div>
|
||||
<div id="container" style="width: 480px; height: 320px;"></div>
|
||||
</body>
|
||||
<script>
|
||||
new spine.SpinePlayer(document.getElementById("container"), {
|
||||
|
||||
@ -398,6 +398,8 @@
|
||||
this.showSettingsDialog();
|
||||
}
|
||||
|
||||
let oldCanvasWidth = 0;
|
||||
let oldCanvasHeight = 0;
|
||||
fullscreenButton.onclick = () => {
|
||||
let doc = document as any;
|
||||
if(doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) {
|
||||
@ -405,12 +407,15 @@
|
||||
else if (doc.mozCancelFullScreen) doc.mozCancelFullScreen();
|
||||
else if (doc.webkitExitFullscreen) doc.webkitExitFullscreen()
|
||||
else if (doc.msExitFullscreen) doc.msExitFullscreen();
|
||||
|
||||
} else {
|
||||
let player = dom as any;
|
||||
if (player.requestFullscreen) player.requestFullscreen();
|
||||
else if (player.webkitRequestFullScreen) player.webkitRequestFullScreen();
|
||||
else if (player.mozRequestFullScreen) player.mozRequestFullScreen();
|
||||
else if (player.msRequestFullscreen) player.msRequestFullscreen();
|
||||
oldCanvasWidth = this.canvas.width;
|
||||
oldCanvasHeight = this.canvas.height;
|
||||
}
|
||||
};
|
||||
|
||||
@ -568,6 +573,7 @@
|
||||
gl.clear(gl.COLOR_BUFFER_BIT);
|
||||
|
||||
// Display loading screen
|
||||
this.loadingScreen.backgroundColor.setFromColor(bg);
|
||||
this.loadingScreen.draw(this.assetManager.isLoadingComplete());
|
||||
|
||||
// Have we finished loading the asset? Then set things up
|
||||
@ -839,18 +845,19 @@
|
||||
|
||||
// For the manual hover to work, we need to disable
|
||||
// hidding the controls if the mouse/touch entered
|
||||
// the clickable area of a child of the controls
|
||||
let mouseOverChildren = false;
|
||||
canvas.onmouseover = (ev) => {
|
||||
mouseOverChildren = false;
|
||||
}
|
||||
canvas.onmouseout = (ev) => {
|
||||
if (ev.relatedTarget == null) {
|
||||
mouseOverChildren = false;
|
||||
} else {
|
||||
mouseOverChildren = isContained(this.dom, (ev.relatedTarget as any));
|
||||
}
|
||||
// the clickable area of a child of the controls.
|
||||
// For this we need to register a mouse handler on
|
||||
// the document and see if we are within the canvas
|
||||
// area :/
|
||||
var mouseOverChildren = true;
|
||||
document.addEventListener("mousemove", (ev: UIEvent) => {
|
||||
if (ev instanceof MouseEvent) {
|
||||
let rect = this.playerControls.getBoundingClientRect();
|
||||
let x = ev.clientX - rect.left;
|
||||
let y = ev.clientY - rect.top;
|
||||
mouseOverChildren = x >= 0 && x <= this.playerControls.clientWidth && y >= 0 && y <= this.playerControls.clientHeight;
|
||||
}
|
||||
});
|
||||
|
||||
let cancelId = 0;
|
||||
let handleHover = () => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user