mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-04 14:24:53 +08:00
recalculateBounds and autoRecalculateBounds to calculateBounds and autoCalculateBounds.
This commit is contained in:
parent
e5a4bccb69
commit
5bf75239d9
@ -45,7 +45,7 @@
|
||||
identifier="boi"
|
||||
atlas="assets/spineboy-pma.atlas"
|
||||
skeleton="assets/spineboy-pro.skel"
|
||||
auto-recalculate-bounds
|
||||
auto-calculate-bounds
|
||||
debug
|
||||
></spine-widget>
|
||||
</div>
|
||||
@ -98,7 +98,7 @@
|
||||
padBottom: 0,
|
||||
padTop: 0,
|
||||
customBounds: false,
|
||||
autoRecalculateBounds: true,
|
||||
autoCalculateBounds: true,
|
||||
fit: "contain",
|
||||
mode: "inside",
|
||||
scaleX: 1,
|
||||
@ -296,10 +296,10 @@
|
||||
|
||||
const boundsFolder = gui.addFolder( 'Bounds' );
|
||||
boundsFolder
|
||||
.add(myObject, 'autoRecalculateBounds')
|
||||
.name( 'auto-recalculate-bounds' )
|
||||
.add(myObject, 'autoCalculateBounds')
|
||||
.name( 'auto-calculate-bounds' )
|
||||
.onChange(value => {
|
||||
boi.setAttribute("auto-recalculate-bounds", value)
|
||||
boi.setAttribute("auto-calculate-bounds", value)
|
||||
});
|
||||
|
||||
boundsFolder
|
||||
|
||||
@ -589,7 +589,7 @@
|
||||
setInterval(() => {
|
||||
const newAnimation = isRoaring ? "walk" : "roar";
|
||||
state.setAnimation(0, newAnimation, true);
|
||||
widget.recalculateBounds(); // scale the skeleton based on the new animation
|
||||
widget.calculateBounds(); // scale the skeleton based on the new animation
|
||||
isRoaring = !isRoaring;
|
||||
}, 4000);
|
||||
})();
|
||||
@ -616,7 +616,7 @@
|
||||
setInterval(() => {
|
||||
const newAnimation = isRoaring ? "walk" : "roar";
|
||||
state.setAnimation(0, newAnimation, true);
|
||||
widget.recalculateBounds(); // scale the skeleton based on the new animation
|
||||
widget.calculateBounds(); // scale the skeleton based on the new animation
|
||||
isRoaring = !isRoaring;
|
||||
}, 4000);
|
||||
})();
|
||||
@ -644,7 +644,7 @@
|
||||
<div class="split-top split">
|
||||
<div class="split-left">
|
||||
<p>To change animation, we could also just change the animation attribute. The widget will reinitiate itself and change animation.</p>
|
||||
<p>In this case you would use <code>auto-recalculate-bounds</code> to ask the widget to always recalculate the bounds, as in the top example.</p>
|
||||
<p>In this case you would use <code>auto-calculate-bounds</code> to ask the widget to always recalculate the bounds, as in the top example.</p>
|
||||
<p>If want to keep the scale consistent, but fit multiple animations in the container, you can use the <code>animation-bounds</code> attribute to define a bounds containing a list of animations, as in the bottom example.</p>
|
||||
|
||||
</div>
|
||||
@ -655,7 +655,7 @@
|
||||
atlas="assets/spineboy-pma.atlas"
|
||||
skeleton="assets/spineboy-pro.skel"
|
||||
animation="jump"
|
||||
auto-recalculate-bounds
|
||||
auto-calculate-bounds
|
||||
></spine-widget>
|
||||
<spine-widget
|
||||
style="width: 100%; flex: 1; border: 1px solid black; box-sizing: border-box;"
|
||||
@ -703,7 +703,7 @@
|
||||
atlas="assets/spineboy-pma.atlas"
|
||||
skeleton="assets/spineboy-pro.skel"
|
||||
animation="jump"
|
||||
auto-recalculate-bounds
|
||||
auto-calculate-bounds
|
||||
></spine-widget>
|
||||
<spine-widget
|
||||
style="width: 100%; height: 150px; border: 1px solid black;"
|
||||
@ -914,7 +914,7 @@
|
||||
setInterval(() => {
|
||||
const newAnimation = isRoaring ? "walk" : "roar";
|
||||
state.setAnimation(0, newAnimation, true);
|
||||
widget.recalculateBounds(); // scale the skeleton based on the new animation
|
||||
widget.calculateBounds(); // scale the skeleton based on the new animation
|
||||
isRoaring = !isRoaring;
|
||||
}, 4000);
|
||||
})();
|
||||
|
||||
@ -189,7 +189,7 @@ interface WidgetAttributes {
|
||||
boundsY: number
|
||||
boundsWidth: number
|
||||
boundsHeight: number
|
||||
autoRecalculateBounds: boolean
|
||||
autoCalculateBounds: boolean
|
||||
width: number
|
||||
height: number
|
||||
isDraggable: boolean
|
||||
@ -409,7 +409,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
|
||||
* If no skin is provided, it is used the default skin.
|
||||
* If no animation is provided, it is used the setup pose.
|
||||
* Bounds are not automatically recalculated.when the animation or skin change.
|
||||
* Invoke {@link recalculateBounds} to recalculate them, or set {@link autoRecalculateBounds} to true.
|
||||
* Invoke {@link calculateBounds} to recalculate them, or set {@link autoCalculateBounds} to true.
|
||||
* Use `setBounds` to set you desired bounds. Bounding Box might be useful to determine the bounds to be used.
|
||||
* If the skeleton overflow the element container consider setting {@link clip} to `true`.
|
||||
*/
|
||||
@ -469,9 +469,9 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
|
||||
|
||||
/**
|
||||
* Whether or not the bounds are recalculated when an animation or a skin is changed. `false` by default.
|
||||
* Connected to `auto-recalculate-bounds` attribute.
|
||||
* Connected to `auto-calculate-bounds` attribute.
|
||||
*/
|
||||
public autoRecalculateBounds = false;
|
||||
public autoCalculateBounds = false;
|
||||
|
||||
/**
|
||||
* Specify a fixed width for the widget. If at least one of `width` and `height` is > 0,
|
||||
@ -811,7 +811,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
|
||||
"bounds-y": { propertyName: "boundsY", type: "number" },
|
||||
"bounds-width": { propertyName: "boundsWidth", type: "number", defaultValue: -1 },
|
||||
"bounds-height": { propertyName: "boundsHeight", type: "number", defaultValue: -1 },
|
||||
"auto-recalculate-bounds": { propertyName: "autoRecalculateBounds", type: "boolean" },
|
||||
"auto-calculate-bounds": { propertyName: "autoCalculateBounds", type: "boolean" },
|
||||
identifier: { propertyName: "identifier", type: "string" },
|
||||
debug: { propertyName: "debug", type: "boolean" },
|
||||
"manual-start": { propertyName: "manualStart", type: "boolean" },
|
||||
@ -962,11 +962,11 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
|
||||
}
|
||||
|
||||
/**
|
||||
* Recalculates and sets the bounds of the current animation on track 0.
|
||||
* Calculates and sets the bounds of the current animation on track 0.
|
||||
* Useful when animations or skins are set programmatically.
|
||||
* @returns void
|
||||
*/
|
||||
public recalculateBounds (forcedRecalculate = false): void {
|
||||
public calculateBounds (forcedRecalculate = false): void {
|
||||
const { skeleton, state } = this;
|
||||
if (!skeleton || !state) return;
|
||||
|
||||
@ -1116,7 +1116,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
|
||||
}
|
||||
}
|
||||
|
||||
if (forceRecalculate || this.autoRecalculateBounds) this.recalculateBounds(forceRecalculate);
|
||||
if (forceRecalculate || this.autoCalculateBounds) this.calculateBounds(forceRecalculate);
|
||||
}
|
||||
|
||||
private render (): void {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user