贴图轴点
This commit is contained in:
tianmo committed
1 parent
c041503004
commit
4d54c87681
13 files changed
+2294
-1248
No files matched your search
@@ -1,4 +1,4 @@
|
||||
var Ae=Object.defineProperty;var Be=(m,o,e)=>o in m?Ae(m,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):m[o]=e;var a=(m,o,e)=>Be(m,typeof o!="symbol"?o+"":o,e);import{T as Fe,a as he,b as F,S as ue,M as pe,c as oe,W as ne,B as H,d as z,L as Te,E as O,e as ce,p as q,f as Ee,g as fe,A as Q,h as me,i as De,j as V,s as re,G as we,k as $,l as Y,m as Le,P as Ie,n as Re,o as Ne,C as X,q as be,r as _e,t as Ue,u as Ye,v as Xe,w as ee,x as j,y as ke,z as Ve,D as J,F as ge,V as Ge,H as ae,I as We,J as $e,U as xe,K as E,R as ve,N as ye,O as Pe,Q as Oe,X as He,Y as ze,Z as qe,_ as Ke}from"./index-CjEJ0XJ5.js";import{$ as bt,a0 as kt,a1 as vt,a2 as yt,a3 as Pt,a4 as St,a5 as Mt,a6 as At,a7 as Bt,a8 as Ft,a9 as Et,aa as Dt,ab as Lt,ac as It,ad as Rt,ae as Nt,af as _t,ag as Ut,ah as Yt,ai as Xt,aj as Vt,ak as Gt,al as Wt,am as $t,an as Ot,ao as Ht,ap as zt,aq as qt,ar as Kt,as as Zt,at as Jt,au as Qt,av as jt,aw as es,ax as ts,ay as ss,az as os,aA as ns,aB as as,aC as rs,aD as is,aE as ls,aF as hs,aG as cs,aH as ds,aI as us,aJ as ps,aK as fs,aL as ms,aM as gs,aN as xs,aO as Cs,aP as Ts,aQ as ws,aR as bs,aS as ks,aT as vs,aU as ys,aV as Ps,aW as Ss,aX as Ms,aY as As,aZ as Bs,a_ as Fs,a$ as Es,b0 as Ds,b1 as Ls,b2 as Is,b3 as Rs,b4 as Ns,b5 as _s,b6 as Us,b7 as Ys,b8 as Xs,b9 as Vs,ba as Gs,bb as Ws,bc as $s,bd as Os,be as Hs,bf as zs,bg as qs,bh as Ks,bi as Zs,bj as Js,bk as Qs,bl as js,bm as eo,bn as to,bo as so,bp as oo,bq as no,br as ao,bs as ro,bt as io,bu as lo,bv as ho,bw as co,bx as uo,by as po,bz as fo,bA as mo,bB as go,bC as xo,bD as Co,bE as To,bF as wo,bG as bo,bH as ko,bI as vo,bJ as yo,bK as Po,bL as So,bM as Mo,bN as Ao,bO as Bo,bP as Fo,bQ as Eo,bR as Do,bS as Lo,bT as Io,bU as Ro,bV as No,bW as _o,bX as Uo,bY as Yo,bZ as Xo,b_ as Vo,b$ as Go,c0 as Wo,c1 as $o,c2 as Oo,c3 as Ho}from"./index-CjEJ0XJ5.js";import{SkeletonClipping as de,SkeletonPhysicsMovement as Ze,AnimationStateData as Je,AtlasAttachmentLoader as Qe,SkeletonBounds as je}from"./index-Bvs6zl88.js";import{AssetCache as qo,AssetManagerBase as Ko,Downloader as Zo,SkeletonRendererCore as Jo,Triangulator as Qo}from"./index-Bvs6zl88.js";if(typeof window<"u"&&window.PIXI){const m=window.require;window.require=o=>{if(m)return m(o);if(o.startsWith("@pixi/"))return window.PIXI}}const _=class _ extends Fe{constructor(e){super(e.resource.source);a(this,"texture");this.texture=he.from(e)}static from(e){return _.textureMap.has(e)?_.textureMap.get(e):new _(e)}setFilters(e,t){this.texture.baseTexture.scaleMode=_.toPixiTextureFilter(e),this.texture.baseTexture.mipmap=_.toPixiMipMap(e)}setWraps(e,t){this.texture.baseTexture.wrapMode=_.toPixiTextureWrap(e)}dispose(){this.texture.destroy()}static toPixiTextureFilter(e){switch(e){case F.Nearest:case F.MipMapNearestLinear:case F.MipMapNearestNearest:return ue.NEAREST;case F.Linear:case F.MipMapLinearLinear:case F.MipMapLinearNearest:return ue.LINEAR;default:throw new Error(`Unknown texture filter: ${String(e)}`)}}static toPixiMipMap(e){switch(e){case F.Nearest:case F.Linear:return pe.OFF;case F.MipMapNearestLinear:case F.MipMapNearestNearest:case F.MipMapLinearLinear:case F.MipMapLinearNearest:return pe.ON;default:throw new Error(`Unknown texture filter: ${String(e)}`)}}static toPixiTextureWrap(e){switch(e){case oe.ClampToEdge:return ne.CLAMP;case oe.MirroredRepeat:return ne.MIRRORED_REPEAT;case oe.Repeat:return ne.REPEAT;default:throw new Error(`Unknown texture wrap: ${String(e)}`)}}static toPixiBlending(e){switch(e){case H.Normal:return z.NORMAL;case H.Additive:return z.ADD;case H.Multiply:return z.MULTIPLY;case H.Screen:return z.SCREEN;default:throw new Error(`Unknown blendMode: ${String(e)}`)}}};a(_,"textureMap",new Map);let G=_;const K="spineTextureAtlasLoader",et={extension:O.Asset,resolver:{test:m=>V(m,".atlas"),parse:m=>{var e,t;const o=m.split(".");return{resolution:parseFloat(((t=(e=re.RETINA_PREFIX)==null?void 0:e.exec(m))==null?void 0:t[1])??"1"),format:o[o.length-2],src:m}}},loader:{name:K,extension:{type:O.LoadParser,priority:Te.Normal,name:K},test(m){return V(m,".atlas")},async load(m){const o=await re.ADAPTER.fetch(m);if(!o.ok)throw new Error(`[${K}] Failed to fetch ${m}: ${o.status} ${o.statusText}`);return await o.text()},testParse(m,o){const e=V(o.src,".atlas"),t=typeof m=="string",s=o.loadParser===K;return Promise.resolve((e||s)&&t)},unload(m){m.dispose()},async parse(m,o,e){var p;const t=o.data||{};let s=q.dirname(o.src);s&&s.lastIndexOf("/")!==s.length-1&&(s+="/");const n=new Ee(m);if(t.images instanceof fe||typeof t.images=="string"){const h=t.images;t.images={},t.images[n.pages[0].name]=h}const r=[];let l=!0;for(const h of e.parsers)if(h.name==="loadTextures"){l=(p=h.config)==null?void 0:p.preferCreateImageBitmap;break}Q.setPreferences({preferCreateImageBitmap:!1});for(const h of n.pages){const u=h.name,c=t!=null&&t.images?t.images[u]:void 0;if(c instanceof fe)h.setTexture(G.from(c));else{const i=c??q.normalize([...s.split(q.sep),u].join(q.sep)),g={src:De(i,o.src),data:{...t.imageMetadLine truncated
|
||||
var Ae=Object.defineProperty;var Be=(m,o,e)=>o in m?Ae(m,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):m[o]=e;var a=(m,o,e)=>Be(m,typeof o!="symbol"?o+"":o,e);import{T as Fe,a as he,b as F,S as ue,M as pe,c as oe,W as ne,B as H,d as z,L as Te,E as O,e as ce,p as q,f as Ee,g as fe,A as Q,h as me,i as De,j as V,s as re,G as we,k as $,l as Y,m as Le,P as Ie,n as Re,o as Ne,C as X,q as be,r as _e,t as Ue,u as Ye,v as Xe,w as ee,x as j,y as ke,z as Ve,D as J,F as ge,V as Ge,H as ae,I as We,J as $e,U as xe,K as E,R as ve,N as ye,O as Pe,Q as Oe,X as He,Y as ze,Z as qe,_ as Ke}from"./index-CkcQpCi2.js";import{$ as bt,a0 as kt,a1 as vt,a2 as yt,a3 as Pt,a4 as St,a5 as Mt,a6 as At,a7 as Bt,a8 as Ft,a9 as Et,aa as Dt,ab as Lt,ac as It,ad as Rt,ae as Nt,af as _t,ag as Ut,ah as Yt,ai as Xt,aj as Vt,ak as Gt,al as Wt,am as $t,an as Ot,ao as Ht,ap as zt,aq as qt,ar as Kt,as as Zt,at as Jt,au as Qt,av as jt,aw as es,ax as ts,ay as ss,az as os,aA as ns,aB as as,aC as rs,aD as is,aE as ls,aF as hs,aG as cs,aH as ds,aI as us,aJ as ps,aK as fs,aL as ms,aM as gs,aN as xs,aO as Cs,aP as Ts,aQ as ws,aR as bs,aS as ks,aT as vs,aU as ys,aV as Ps,aW as Ss,aX as Ms,aY as As,aZ as Bs,a_ as Fs,a$ as Es,b0 as Ds,b1 as Ls,b2 as Is,b3 as Rs,b4 as Ns,b5 as _s,b6 as Us,b7 as Ys,b8 as Xs,b9 as Vs,ba as Gs,bb as Ws,bc as $s,bd as Os,be as Hs,bf as zs,bg as qs,bh as Ks,bi as Zs,bj as Js,bk as Qs,bl as js,bm as eo,bn as to,bo as so,bp as oo,bq as no,br as ao,bs as ro,bt as io,bu as lo,bv as ho,bw as co,bx as uo,by as po,bz as fo,bA as mo,bB as go,bC as xo,bD as Co,bE as To,bF as wo,bG as bo,bH as ko,bI as vo,bJ as yo,bK as Po,bL as So,bM as Mo,bN as Ao,bO as Bo,bP as Fo,bQ as Eo,bR as Do,bS as Lo,bT as Io,bU as Ro,bV as No,bW as _o,bX as Uo,bY as Yo,bZ as Xo,b_ as Vo,b$ as Go,c0 as Wo,c1 as $o,c2 as Oo,c3 as Ho}from"./index-CkcQpCi2.js";import{SkeletonClipping as de,SkeletonPhysicsMovement as Ze,AnimationStateData as Je,AtlasAttachmentLoader as Qe,SkeletonBounds as je}from"./index-yF8mmEQU.js";import{AssetCache as qo,AssetManagerBase as Ko,Downloader as Zo,SkeletonRendererCore as Jo,Triangulator as Qo}from"./index-yF8mmEQU.js";if(typeof window<"u"&&window.PIXI){const m=window.require;window.require=o=>{if(m)return m(o);if(o.startsWith("@pixi/"))return window.PIXI}}const _=class _ extends Fe{constructor(e){super(e.resource.source);a(this,"texture");this.texture=he.from(e)}static from(e){return _.textureMap.has(e)?_.textureMap.get(e):new _(e)}setFilters(e,t){this.texture.baseTexture.scaleMode=_.toPixiTextureFilter(e),this.texture.baseTexture.mipmap=_.toPixiMipMap(e)}setWraps(e,t){this.texture.baseTexture.wrapMode=_.toPixiTextureWrap(e)}dispose(){this.texture.destroy()}static toPixiTextureFilter(e){switch(e){case F.Nearest:case F.MipMapNearestLinear:case F.MipMapNearestNearest:return ue.NEAREST;case F.Linear:case F.MipMapLinearLinear:case F.MipMapLinearNearest:return ue.LINEAR;default:throw new Error(`Unknown texture filter: ${String(e)}`)}}static toPixiMipMap(e){switch(e){case F.Nearest:case F.Linear:return pe.OFF;case F.MipMapNearestLinear:case F.MipMapNearestNearest:case F.MipMapLinearLinear:case F.MipMapLinearNearest:return pe.ON;default:throw new Error(`Unknown texture filter: ${String(e)}`)}}static toPixiTextureWrap(e){switch(e){case oe.ClampToEdge:return ne.CLAMP;case oe.MirroredRepeat:return ne.MIRRORED_REPEAT;case oe.Repeat:return ne.REPEAT;default:throw new Error(`Unknown texture wrap: ${String(e)}`)}}static toPixiBlending(e){switch(e){case H.Normal:return z.NORMAL;case H.Additive:return z.ADD;case H.Multiply:return z.MULTIPLY;case H.Screen:return z.SCREEN;default:throw new Error(`Unknown blendMode: ${String(e)}`)}}};a(_,"textureMap",new Map);let G=_;const K="spineTextureAtlasLoader",et={extension:O.Asset,resolver:{test:m=>V(m,".atlas"),parse:m=>{var e,t;const o=m.split(".");return{resolution:parseFloat(((t=(e=re.RETINA_PREFIX)==null?void 0:e.exec(m))==null?void 0:t[1])??"1"),format:o[o.length-2],src:m}}},loader:{name:K,extension:{type:O.LoadParser,priority:Te.Normal,name:K},test(m){return V(m,".atlas")},async load(m){const o=await re.ADAPTER.fetch(m);if(!o.ok)throw new Error(`[${K}] Failed to fetch ${m}: ${o.status} ${o.statusText}`);return await o.text()},testParse(m,o){const e=V(o.src,".atlas"),t=typeof m=="string",s=o.loadParser===K;return Promise.resolve((e||s)&&t)},unload(m){m.dispose()},async parse(m,o,e){var p;const t=o.data||{};let s=q.dirname(o.src);s&&s.lastIndexOf("/")!==s.length-1&&(s+="/");const n=new Ee(m);if(t.images instanceof fe||typeof t.images=="string"){const h=t.images;t.images={},t.images[n.pages[0].name]=h}const r=[];let l=!0;for(const h of e.parsers)if(h.name==="loadTextures"){l=(p=h.config)==null?void 0:p.preferCreateImageBitmap;break}Q.setPreferences({preferCreateImageBitmap:!1});for(const h of n.pages){const u=h.name,c=t!=null&&t.images?t.images[u]:void 0;if(c instanceof fe)h.setTexture(G.from(c));else{const i=c??q.normalize([...s.split(q.sep),u].join(q.sep)),g={src:De(i,o.src),data:{...t.imageMetadLine truncated
|
||||
attribute vec2 aVertexPosition;
|
||||
attribute vec2 aTextureCoord;
|
||||
|
||||
Vendored
-1
@@ -1 +0,0 @@
|
||||
.help-overlay[data-v-78204b9d]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:72px 24px 28px;box-sizing:border-box;background:#05080fb8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.help-dialog[data-v-78204b9d]{width:min(820px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;border:1px solid #3a4864;border-radius:14px;background:#141a27;color:#b8c3d8;box-shadow:0 22px 70px #0000009e}.help-head[data-v-78204b9d]{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px 15px;border-bottom:1px solid #2b354a;background:linear-gradient(135deg,#202942,#181e2d)}.help-head h2[data-v-78204b9d]{margin:0;color:#eef2ff;font-size:19px}.help-head p[data-v-78204b9d]{margin:5px 0 0;color:#7786a3;font-size:11px}.help-close[data-v-78204b9d]{width:28px;height:28px;flex:0 0 28px;border:1px solid #43516b;border-radius:6px;background:#273249;color:#ccd7ed;cursor:pointer}.help-close[data-v-78204b9d]:hover{border-color:#7774ff;background:#3b4670;color:#fff}.help-body[data-v-78204b9d]{min-height:0;overflow:auto;padding:18px 20px 21px}.help-section[data-v-78204b9d]{padding:14px 15px;border:1px solid #2c3850;border-radius:10px;background:#181f2e}.help-section h3[data-v-78204b9d]{margin:0 0 11px;color:#9fb2ff;font-size:13px}.help-start ol[data-v-78204b9d]{margin:0;padding-left:21px;color:#aab6cc;font-size:12px;line-height:1.75}.help-start li[data-v-78204b9d]::marker{color:#7774ff;font-weight:700}.help-section b[data-v-78204b9d]{color:#dce4f7}.help-grid[data-v-78204b9d]{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);gap:12px;margin-top:12px}.help-list[data-v-78204b9d]{display:grid;gap:0;margin:0}.help-list>div[data-v-78204b9d]{display:grid;grid-template-columns:78px 1fr;gap:9px;padding:7px 0;border-bottom:1px solid #263146}.help-list>div[data-v-78204b9d]:last-child{border-bottom:0}.help-list dt[data-v-78204b9d]{color:#d3dcf0;font-size:11px;font-weight:700}.help-list dd[data-v-78204b9d]{margin:0;color:#8795ae;font-size:11px;line-height:1.5}.shortcut-list[data-v-78204b9d]{display:grid;gap:7px}.shortcut-list>div[data-v-78204b9d]{display:flex;align-items:center;min-height:25px;gap:5px}.shortcut-list kbd[data-v-78204b9d]{min-width:24px;box-sizing:border-box;padding:3px 6px;border:1px solid #465470;border-bottom-width:2px;border-radius:5px;background:#101623;color:#e0e7f6;font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center}.shortcut-list span[data-v-78204b9d]{color:#65728b;font-size:10px}.shortcut-list em[data-v-78204b9d]{margin-left:auto;color:#9ca9c1;font-size:11px;font-style:normal}.help-note[data-v-78204b9d]{margin:11px 0 0;padding-top:9px;border-top:1px solid #2a3549;color:#697791;font-size:10px;line-height:1.55}.help-export[data-v-78204b9d]{margin-top:12px}.help-export p[data-v-78204b9d]{margin:0;color:#8997b0;font-size:11px;line-height:1.65}.help-doc-title[data-v-78204b9d]{margin:16px 2px 2px;color:#9fb2ff;font-size:13px;font-weight:700;letter-spacing:.5px}.help-module[data-v-78204b9d]{margin-top:12px}.help-module-head[data-v-78204b9d]{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;background:transparent;color:#9fb2ff;font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer}.help-module-head[data-v-78204b9d]:hover{color:#fff}.help-module-head .mtitle[data-v-78204b9d]{flex:1;min-width:0}.help-module-head .caret[data-v-78204b9d]{flex:0 0 auto;color:#7b86a2;font-size:12px}.help-module.open .help-module-head[data-v-78204b9d]{color:#fff}.help-module.open .help-module-head .caret[data-v-78204b9d]{color:#9fb2ff}.help-module .mnum[data-v-78204b9d]{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#4a53b8,#6a5fd0);color:#fff;font-size:12px;font-weight:700}.help-module.help-connector[data-v-78204b9d]{border-color:#4a4f8a;background:linear-gradient(135deg,#1d2442,#181d2f)}.help-module.help-connector .help-module-head[data-v-78204b9d]{color:#b8c2ff}.help-module .connector-intro[data-v-78204b9d]{margin:0 0 10px;color:#9aa8c4;font-size:11px;line-height:1.6}.help-module .connector-intro b[data-v-78204b9d]{color:#dce4f7}.help-module .dl-link[data-v-78204b9d]{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 10px 6px 0;padding:6px 12px;border:1px solid #5652b5;border-radius:6px;background:#4540a0;color:#fff;font-size:12px;font-weight:700;text-decoration:none}.help-module .dl-link[data-v-78204b9d]:hover{border-color:#8982ff;background:#554dc2}.help-module .dl-link small[data-v-78204b9d]{color:#cfe0ff;font-weight:500;font-size:9px}.help-module-body[data-v-78204b9d]{padding-top:10px}@media(max-width:760px){.help-overlay[data-v-78204b9d]{padding:66px 12px 14px}.help-grid[data-v-78204b9d]{grid-template-columns:1fr}}.topbar[data-v-4749834a]{position:absolute;top:10px;left:10px;right:10px;dispLine truncated
|
||||
Vendored
-1239
File diff suppressed because it is too large.
Load diff
Vendored
+1239
File diff suppressed because it is too large.
Load diff
Vendored
+1
@@ -0,0 +1 @@
|
||||
.help-overlay[data-v-78204b9d]{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:72px 24px 28px;box-sizing:border-box;background:#05080fb8;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.help-dialog[data-v-78204b9d]{width:min(820px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;border:1px solid #3a4864;border-radius:14px;background:#141a27;color:#b8c3d8;box-shadow:0 22px 70px #0000009e}.help-head[data-v-78204b9d]{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 20px 15px;border-bottom:1px solid #2b354a;background:linear-gradient(135deg,#202942,#181e2d)}.help-head h2[data-v-78204b9d]{margin:0;color:#eef2ff;font-size:19px}.help-head p[data-v-78204b9d]{margin:5px 0 0;color:#7786a3;font-size:11px}.help-close[data-v-78204b9d]{width:28px;height:28px;flex:0 0 28px;border:1px solid #43516b;border-radius:6px;background:#273249;color:#ccd7ed;cursor:pointer}.help-close[data-v-78204b9d]:hover{border-color:#7774ff;background:#3b4670;color:#fff}.help-body[data-v-78204b9d]{min-height:0;overflow:auto;padding:18px 20px 21px}.help-section[data-v-78204b9d]{padding:14px 15px;border:1px solid #2c3850;border-radius:10px;background:#181f2e}.help-section h3[data-v-78204b9d]{margin:0 0 11px;color:#9fb2ff;font-size:13px}.help-start ol[data-v-78204b9d]{margin:0;padding-left:21px;color:#aab6cc;font-size:12px;line-height:1.75}.help-start li[data-v-78204b9d]::marker{color:#7774ff;font-weight:700}.help-section b[data-v-78204b9d]{color:#dce4f7}.help-grid[data-v-78204b9d]{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);gap:12px;margin-top:12px}.help-list[data-v-78204b9d]{display:grid;gap:0;margin:0}.help-list>div[data-v-78204b9d]{display:grid;grid-template-columns:78px 1fr;gap:9px;padding:7px 0;border-bottom:1px solid #263146}.help-list>div[data-v-78204b9d]:last-child{border-bottom:0}.help-list dt[data-v-78204b9d]{color:#d3dcf0;font-size:11px;font-weight:700}.help-list dd[data-v-78204b9d]{margin:0;color:#8795ae;font-size:11px;line-height:1.5}.shortcut-list[data-v-78204b9d]{display:grid;gap:7px}.shortcut-list>div[data-v-78204b9d]{display:flex;align-items:center;min-height:25px;gap:5px}.shortcut-list kbd[data-v-78204b9d]{min-width:24px;box-sizing:border-box;padding:3px 6px;border:1px solid #465470;border-bottom-width:2px;border-radius:5px;background:#101623;color:#e0e7f6;font:10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center}.shortcut-list span[data-v-78204b9d]{color:#65728b;font-size:10px}.shortcut-list em[data-v-78204b9d]{margin-left:auto;color:#9ca9c1;font-size:11px;font-style:normal}.help-note[data-v-78204b9d]{margin:11px 0 0;padding-top:9px;border-top:1px solid #2a3549;color:#697791;font-size:10px;line-height:1.55}.help-export[data-v-78204b9d]{margin-top:12px}.help-export p[data-v-78204b9d]{margin:0;color:#8997b0;font-size:11px;line-height:1.65}.help-doc-title[data-v-78204b9d]{margin:16px 2px 2px;color:#9fb2ff;font-size:13px;font-weight:700;letter-spacing:.5px}.help-module[data-v-78204b9d]{margin-top:12px}.help-module-head[data-v-78204b9d]{display:flex;align-items:center;gap:8px;width:100%;padding:0;border:0;background:transparent;color:#9fb2ff;font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer}.help-module-head[data-v-78204b9d]:hover{color:#fff}.help-module-head .mtitle[data-v-78204b9d]{flex:1;min-width:0}.help-module-head .caret[data-v-78204b9d]{flex:0 0 auto;color:#7b86a2;font-size:12px}.help-module.open .help-module-head[data-v-78204b9d]{color:#fff}.help-module.open .help-module-head .caret[data-v-78204b9d]{color:#9fb2ff}.help-module .mnum[data-v-78204b9d]{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,#4a53b8,#6a5fd0);color:#fff;font-size:12px;font-weight:700}.help-module.help-connector[data-v-78204b9d]{border-color:#4a4f8a;background:linear-gradient(135deg,#1d2442,#181d2f)}.help-module.help-connector .help-module-head[data-v-78204b9d]{color:#b8c2ff}.help-module .connector-intro[data-v-78204b9d]{margin:0 0 10px;color:#9aa8c4;font-size:11px;line-height:1.6}.help-module .connector-intro b[data-v-78204b9d]{color:#dce4f7}.help-module .dl-link[data-v-78204b9d]{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 10px 6px 0;padding:6px 12px;border:1px solid #5652b5;border-radius:6px;background:#4540a0;color:#fff;font-size:12px;font-weight:700;text-decoration:none}.help-module .dl-link[data-v-78204b9d]:hover{border-color:#8982ff;background:#554dc2}.help-module .dl-link small[data-v-78204b9d]{color:#cfe0ff;font-weight:500;font-size:9px}.help-module-body[data-v-78204b9d]{padding-top:10px}@media(max-width:760px){.help-overlay[data-v-78204b9d]{padding:66px 12px 14px}.help-grid[data-v-78204b9d]{grid-template-columns:1fr}}.topbar[data-v-4749834a]{position:absolute;top:10px;left:10px;right:10px;dispLine truncated
|
||||
@@ -1,2 +1,2 @@
|
||||
var ft=Object.defineProperty;var gt=(W,t,e)=>t in W?ft(W,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):W[t]=e;var T=(W,t,e)=>gt(W,typeof t!="symbol"?t+"":t,e);import{f as ht,R as pt,N as dt,ac as ut,Z as mt,b4 as yt,O as rt,b5 as at,U as D,B as Tt}from"./index-CjEJ0XJ5.js";import{$ as Rt,a0 as Yt,a1 as Ft,a2 as Et,y as _t,a3 as Ot,a4 as kt,a5 as Xt,a6 as Bt,a7 as Nt,a8 as Dt,a9 as $t,aa as zt,ab as Wt,ad as qt,H as Gt,ae as Jt,af as Ht,ag as Zt,ah as Kt,ai as Qt,aj as jt,ak as te,al as ee,am as se,an as ne,ao as ie,ap as oe,aq as re,ar as ae,as as le,at as ce,au as he,av as pe,aw as de,ax as ue,ay as fe,az as ge,aA as me,aB as ye,aC as Te,aD as be,aE as we,aF as xe,aG as Ae,aH as Pe,aI as Ie,aJ as Ce,aK as Ve,aL as Le,aM as Se,aN as Me,aO as ve,aP as Ue,aQ as Re,aR as Ye,aS as Fe,aT as Ee,x as _e,aU as Oe,aV as ke,aW as Xe,aX as Be,aY as Ne,aZ as De,a_ as $e,a$ as ze,b0 as We,b1 as qe,b2 as Ge,b3 as Je,b6 as He,b7 as Ze,b8 as Ke,b9 as Qe,ba as je,bb as ts,bc as es,bd as ss,be as ns,bf as is,bg as os,bh as rs,bi as as,bj as ls,bk as cs,bl as hs,bm as ps,bn as ds,bo as us,bp as fs,bq as gs,br as ms,bs as ys,bt as Ts,bu as bs,w as ws,X as xs,J as As,Y as Ps,z as Is,bv as Cs,bw as Vs,bx as Ls,by as Ss,bz as Ms,bA as vs,bB as Us,bC as Rs,bD as Ys,bE as Fs,bF as Es,bG as _s,T as Os,bH as ks,bI as Xs,b as Bs,bJ as Ns,c as Ds,bK as $s,bL as zs,bM as Ws,bN as qs,bO as Gs,bP as Js,bQ as Hs,bR as Zs,bS as Ks,bT as Qs,bU as js,bV as tn,bW as en,bX as sn,bY as nn,bZ as on,b_ as rn,V as an,b$ as ln,c0 as cn,c1 as hn,c2 as pn,c3 as dn}from"./index-CjEJ0XJ5.js";class It{constructor(t){T(this,"skeletonData");T(this,"animationToMixTime",{});T(this,"defaultMix",0);if(!t)throw new Error("skeletonData cannot be null.");this.skeletonData=t}setMix(t,e,n){return typeof t=="string"?this.setMix1(t,e,n):this.setMix2(t,e,n)}setMix1(t,e,n){const s=this.skeletonData.findAnimation(t);if(!s)throw new Error(`Animation not found: ${t}`);const i=this.skeletonData.findAnimation(e);if(!i)throw new Error(`Animation not found: ${e}`);this.setMix2(s,i,n)}setMix2(t,e,n){if(!t)throw new Error("from cannot be null.");if(!e)throw new Error("to cannot be null.");const s=`${t.name}.${e.name}`;this.animationToMixTime[s]=n}getMix(t,e){const n=`${t.name}.${e.name}`,s=this.animationToMixTime[n];return s===void 0?this.defaultMix:s}}class Ct{constructor(t,e="",n=new bt,s=new lt){T(this,"textureLoader");T(this,"pathPrefix");T(this,"downloader");T(this,"cache");T(this,"errors",{});T(this,"toLoad",0);T(this,"loaded",0);T(this,"texturePmaInfo",{});this.textureLoader=t,this.pathPrefix=e,this.downloader=n,this.cache=s}start(t){return this.toLoad++,this.pathPrefix+t}success(t,e,n){this.toLoad--,this.loaded++,this.cache.assets[e]=n,this.cache.assetsRefCount[e]=(this.cache.assetsRefCount[e]||0)+1,t&&t(e,n)}error(t,e,n){this.toLoad--,this.loaded++,this.errors[e]=n,t&&t(e,n)}loadAll(){return new Promise((e,n)=>{const s=()=>{if(this.isLoadingComplete()){this.hasErrors()?n(this.errors):e(this);return}requestAnimationFrame(s)};requestAnimationFrame(s)})}setRawDataURI(t,e){this.downloader.rawDataUris[this.pathPrefix+t]=e}loadBinary(t,e=()=>{},n=()=>{}){t=this.start(t),!this.reuseAssets(t,e,n)&&(this.cache.assetsLoaded[t]=new Promise((s,i)=>{this.downloader.downloadBinary(t,o=>{this.success(e,t,o),s(o)},(o,r)=>{const l=`Couldn't load binary ${t}: status ${o}, ${r}`;this.error(n,t,l),i(l)})}))}loadText(t,e=()=>{},n=()=>{}){t=this.start(t),this.downloader.downloadText(t,s=>{this.success(e,t,s)},(s,i)=>{this.error(n,t,`Couldn't load text ${t}: status ${s}, ${i}`)})}loadJson(t,e=()=>{},n=()=>{}){t=this.start(t),!this.reuseAssets(t,e,n)&&(this.cache.assetsLoaded[t]=new Promise((s,i)=>{this.downloader.downloadJson(t,o=>{this.success(e,t,o),s(o)},(o,r)=>{const l=`Couldn't load JSON ${t}: status ${o}, ${r}`;this.error(n,t,l),i(l)})}))}reuseAssets(t,e=()=>{},n=()=>{}){const s=this.cache.getAsset(t),i=s!==void 0;return i&&(this.cache.assetsLoaded[t]=s.then(o=>(o=o instanceof Image||o instanceof ImageBitmap?this.textureLoader(o):o,this.success(e,t,o),o)).catch(o=>{this.error(n,t,o)})),i}loadTexture(t,e=()=>{},n=()=>{}){if(t=this.start(t),this.reuseAssets(t,e,n))return;const s=this.texturePmaInfo[t];this.cache.assetsLoaded[t]=new Promise((i,o)=>{if(!!!(typeof window<"u"&&typeof navigator<"u"&&window.document))fetch(t,{mode:"cors"}).then(c=>{if(c.ok)return c.blob();const a=`Couldn't load image: ${t}`;this.error(n,t,`Couldn't load image: ${t}`),o(a)}).then(c=>c?createImageBitmap(c,{premultiplyAlpha:"none",colorSpaceConversion:"none"}):null).then(c=>{if(c){const a=this.createTexture(t,s,c);this.success(e,t,a),i(a)}});else{const c=new Image;c.crossOrigin="anonymous",c.onload=()=>{const a=this.createTexture(t,s,c);this.success(e,t,a),i(a)},c.onerror=()=>{const a=`Couldn't load image: ${t}`;this.error(n,t,a),o(a)},this.downloader.rawDataUris[t]&&(t=this.downloader.rawDataUris[t]),c.src=t}})}loadTextureAtlas(t,e=()=>{},n=()=>{},s){const i=t.lastIndexOf("/"),o=i>=0?t.substring(0,i+1)Line truncated
|
||||
var ft=Object.defineProperty;var gt=(W,t,e)=>t in W?ft(W,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):W[t]=e;var T=(W,t,e)=>gt(W,typeof t!="symbol"?t+"":t,e);import{f as ht,R as pt,N as dt,ac as ut,Z as mt,b4 as yt,O as rt,b5 as at,U as D,B as Tt}from"./index-CkcQpCi2.js";import{$ as Rt,a0 as Yt,a1 as Ft,a2 as Et,y as _t,a3 as Ot,a4 as kt,a5 as Xt,a6 as Bt,a7 as Nt,a8 as Dt,a9 as $t,aa as zt,ab as Wt,ad as qt,H as Gt,ae as Jt,af as Ht,ag as Zt,ah as Kt,ai as Qt,aj as jt,ak as te,al as ee,am as se,an as ne,ao as ie,ap as oe,aq as re,ar as ae,as as le,at as ce,au as he,av as pe,aw as de,ax as ue,ay as fe,az as ge,aA as me,aB as ye,aC as Te,aD as be,aE as we,aF as xe,aG as Ae,aH as Pe,aI as Ie,aJ as Ce,aK as Ve,aL as Le,aM as Se,aN as Me,aO as ve,aP as Ue,aQ as Re,aR as Ye,aS as Fe,aT as Ee,x as _e,aU as Oe,aV as ke,aW as Xe,aX as Be,aY as Ne,aZ as De,a_ as $e,a$ as ze,b0 as We,b1 as qe,b2 as Ge,b3 as Je,b6 as He,b7 as Ze,b8 as Ke,b9 as Qe,ba as je,bb as ts,bc as es,bd as ss,be as ns,bf as is,bg as os,bh as rs,bi as as,bj as ls,bk as cs,bl as hs,bm as ps,bn as ds,bo as us,bp as fs,bq as gs,br as ms,bs as ys,bt as Ts,bu as bs,w as ws,X as xs,J as As,Y as Ps,z as Is,bv as Cs,bw as Vs,bx as Ls,by as Ss,bz as Ms,bA as vs,bB as Us,bC as Rs,bD as Ys,bE as Fs,bF as Es,bG as _s,T as Os,bH as ks,bI as Xs,b as Bs,bJ as Ns,c as Ds,bK as $s,bL as zs,bM as Ws,bN as qs,bO as Gs,bP as Js,bQ as Hs,bR as Zs,bS as Ks,bT as Qs,bU as js,bV as tn,bW as en,bX as sn,bY as nn,bZ as on,b_ as rn,V as an,b$ as ln,c0 as cn,c1 as hn,c2 as pn,c3 as dn}from"./index-CkcQpCi2.js";class It{constructor(t){T(this,"skeletonData");T(this,"animationToMixTime",{});T(this,"defaultMix",0);if(!t)throw new Error("skeletonData cannot be null.");this.skeletonData=t}setMix(t,e,n){return typeof t=="string"?this.setMix1(t,e,n):this.setMix2(t,e,n)}setMix1(t,e,n){const s=this.skeletonData.findAnimation(t);if(!s)throw new Error(`Animation not found: ${t}`);const i=this.skeletonData.findAnimation(e);if(!i)throw new Error(`Animation not found: ${e}`);this.setMix2(s,i,n)}setMix2(t,e,n){if(!t)throw new Error("from cannot be null.");if(!e)throw new Error("to cannot be null.");const s=`${t.name}.${e.name}`;this.animationToMixTime[s]=n}getMix(t,e){const n=`${t.name}.${e.name}`,s=this.animationToMixTime[n];return s===void 0?this.defaultMix:s}}class Ct{constructor(t,e="",n=new bt,s=new lt){T(this,"textureLoader");T(this,"pathPrefix");T(this,"downloader");T(this,"cache");T(this,"errors",{});T(this,"toLoad",0);T(this,"loaded",0);T(this,"texturePmaInfo",{});this.textureLoader=t,this.pathPrefix=e,this.downloader=n,this.cache=s}start(t){return this.toLoad++,this.pathPrefix+t}success(t,e,n){this.toLoad--,this.loaded++,this.cache.assets[e]=n,this.cache.assetsRefCount[e]=(this.cache.assetsRefCount[e]||0)+1,t&&t(e,n)}error(t,e,n){this.toLoad--,this.loaded++,this.errors[e]=n,t&&t(e,n)}loadAll(){return new Promise((e,n)=>{const s=()=>{if(this.isLoadingComplete()){this.hasErrors()?n(this.errors):e(this);return}requestAnimationFrame(s)};requestAnimationFrame(s)})}setRawDataURI(t,e){this.downloader.rawDataUris[this.pathPrefix+t]=e}loadBinary(t,e=()=>{},n=()=>{}){t=this.start(t),!this.reuseAssets(t,e,n)&&(this.cache.assetsLoaded[t]=new Promise((s,i)=>{this.downloader.downloadBinary(t,o=>{this.success(e,t,o),s(o)},(o,r)=>{const l=`Couldn't load binary ${t}: status ${o}, ${r}`;this.error(n,t,l),i(l)})}))}loadText(t,e=()=>{},n=()=>{}){t=this.start(t),this.downloader.downloadText(t,s=>{this.success(e,t,s)},(s,i)=>{this.error(n,t,`Couldn't load text ${t}: status ${s}, ${i}`)})}loadJson(t,e=()=>{},n=()=>{}){t=this.start(t),!this.reuseAssets(t,e,n)&&(this.cache.assetsLoaded[t]=new Promise((s,i)=>{this.downloader.downloadJson(t,o=>{this.success(e,t,o),s(o)},(o,r)=>{const l=`Couldn't load JSON ${t}: status ${o}, ${r}`;this.error(n,t,l),i(l)})}))}reuseAssets(t,e=()=>{},n=()=>{}){const s=this.cache.getAsset(t),i=s!==void 0;return i&&(this.cache.assetsLoaded[t]=s.then(o=>(o=o instanceof Image||o instanceof ImageBitmap?this.textureLoader(o):o,this.success(e,t,o),o)).catch(o=>{this.error(n,t,o)})),i}loadTexture(t,e=()=>{},n=()=>{}){if(t=this.start(t),this.reuseAssets(t,e,n))return;const s=this.texturePmaInfo[t];this.cache.assetsLoaded[t]=new Promise((i,o)=>{if(!!!(typeof window<"u"&&typeof navigator<"u"&&window.document))fetch(t,{mode:"cors"}).then(c=>{if(c.ok)return c.blob();const a=`Couldn't load image: ${t}`;this.error(n,t,`Couldn't load image: ${t}`),o(a)}).then(c=>c?createImageBitmap(c,{premultiplyAlpha:"none",colorSpaceConversion:"none"}):null).then(c=>{if(c){const a=this.createTexture(t,s,c);this.success(e,t,a),i(a)}});else{const c=new Image;c.crossOrigin="anonymous",c.onload=()=>{const a=this.createTexture(t,s,c);this.success(e,t,a),i(a)},c.onerror=()=>{const a=`Couldn't load image: ${t}`;this.error(n,t,a),o(a)},this.downloader.rawDataUris[t]&&(t=this.downloader.rawDataUris[t]),c.src=t}})}loadTextureAtlas(t,e=()=>{},n=()=>{},s){const i=t.lastIndexOf("/"),o=i>=0?t.substring(0,i+1)Line truncated
|
||||
${n}`:""}`)}remove(t){t=this.pathPrefix+t;const e=this.cache.assets[t];return e.dispose&&e.dispose(),delete this.cache.assets[t],delete this.cache.assetsRefCount[t],delete this.cache.assetsLoaded[t],e}removeAll(){for(const t in this.cache.assets){const e=this.cache.assets[t];e.dispose&&e.dispose()}this.cache.assets={},this.cache.assetsLoaded={},this.cache.assetsRefCount={}}isLoadingComplete(){return this.toLoad===0}getToLoad(){return this.toLoad}getLoaded(){return this.loaded}dispose(){this.removeAll()}disposeAsset(t){const e=this.cache.assets[t];if(e instanceof ht){e.dispose();return}this.disposeAssetInternal(t)}hasErrors(){return Object.keys(this.errors).length>0}getErrors(){return this.errors}disposeAssetInternal(t){if(this.cache.assetsRefCount[t]>0&&--this.cache.assetsRefCount[t]===0)return this.remove(t)}createTextureAtlas(t,e,n,s){const i=new ht(t);i.dispose=()=>{var o;if(!(this.cache.assetsRefCount[n]<=0)){this.disposeAssetInternal(n);for(const r of i.pages)(o=r.texture)==null||o.dispose()}};for(const o of i.pages){const r=this.texturePath(e,o.name,s);this.texturePmaInfo[this.pathPrefix+r]=o.pma}return i}createTexture(t,e,n){const s=this.textureLoader(n,e),i=s.dispose.bind(s);return s.dispose=()=>{this.disposeAssetInternal(t)&&i()},s}texturePath(t,e,n){return n?n[e]:t+e}}const nt=class nt{constructor(){T(this,"assets",{});T(this,"assetsRefCount",{});T(this,"assetsLoaded",{})}static getCache(t){const e=nt.AVAILABLE_CACHES.get(t);if(e)return e;const n=new nt;return nt.AVAILABLE_CACHES.set(t,n),n}async addAsset(t,e){return this.assetsLoaded[t]=Promise.resolve(e),this.assets[t]=e,e}getAsset(t){return this.assetsLoaded[t]}};T(nt,"AVAILABLE_CACHES",new Map);let lt=nt;class bt{constructor(){T(this,"callbacks",{});T(this,"rawDataUris",{})}dataUriToString(t){if(!t.startsWith("data:"))throw new Error("Not a data URI.");let e=t.indexOf("base64,");return e!==-1?(e+=7,atob(t.substr(e))):t.substr(t.indexOf(",")+1)}base64ToUint8Array(t){var e=window.atob(t),n=e.length,s=new Uint8Array(n);for(let i=0;i<n;i++)s[i]=e.charCodeAt(i);return s}dataUriToUint8Array(t){if(!t.startsWith("data:"))throw new Error("Not a data URI.");let e=t.indexOf("base64,");if(e===-1)throw new Error("Not a binary data URI.");return e+=7,this.base64ToUint8Array(t.substr(e))}downloadText(t,e,n){if(this.start(t,e,n))return;const s=this.rawDataUris[t];if(s&&!s.includes(".")){try{this.finish(t,200,this.dataUriToString(s))}catch(r){this.finish(t,400,JSON.stringify(r))}return}const i=new XMLHttpRequest;i.overrideMimeType("text/html"),i.open("GET",s||t,!0);const o=()=>{this.finish(t,i.status,i.responseText)};i.onload=o,i.onerror=o,i.send()}downloadJson(t,e,n){this.downloadText(t,s=>{e(JSON.parse(s))},n)}downloadBinary(t,e,n){if(this.start(t,e,n))return;const s=this.rawDataUris[t];if(s&&!s.includes(".")){try{this.finish(t,200,this.dataUriToUint8Array(s))}catch(r){this.finish(t,400,JSON.stringify(r))}return}const i=new XMLHttpRequest;i.open("GET",s||t,!0),i.responseType="arraybuffer";const o=()=>{this.finish(t,i.status,i.response)};i.onload=()=>{i.status===200||i.status===0?this.finish(t,200,new Uint8Array(i.response)):o()},i.onerror=o,i.send()}start(t,e,n){let s=this.callbacks[t];try{if(s)return!0;this.callbacks[t]=s=[]}finally{s.push(e,n)}}finish(t,e,n){const s=this.callbacks[t];if(delete this.callbacks[t],e===200||e===0)for(let i=0,o=s.length;i<o;i+=2)s[i](n);else for(let i=1,o=s.length;i<o;i+=2)s[i](e,n)}}class Vt{constructor(t,e=!1){T(this,"atlas");T(this,"allowMissingRegions");this.atlas=t,this.allowMissingRegions=e}findRegions(t,e,n){const s=n.regions;for(let i=0,o=s.length;i<o;i++)s[i]=this.findRegion(t,n.getPath(e,i))}findRegion(t,e){const n=this.atlas.findRegion(e);if(!n&&!this.allowMissingRegions)throw new Error(`Region not found in atlas: ${e} (attachment: ${t})`);return n}newRegionAttachment(t,e,n,s,i){return this.findRegions(n,s,i),new pt(n,i)}newMeshAttachment(t,e,n,s,i){return this.findRegions(n,s,i),new dt(n,i)}newBoundingBoxAttachment(t,e,n){return new ut(n)}newPathAttachment(t,e,n){return new mt(n)}newPointAttachment(t,e,n){return new yt(n)}newClippingAttachment(t,e,n){return new rt(n)}}class Lt{constructor(){T(this,"minX",0);T(this,"minY",0);T(this,"maxX",0);T(this,"maxY",0);T(this,"boundingBoxes",[]);T(this,"polygons",[]);T(this,"polygonPool",new at(()=>D.newFloatArray(16)))}update(t,e){if(!t)throw new Error("skeleton cannot be null.");const n=this.boundingBoxes,s=this.polygons,i=this.polygonPool,o=t.slots,r=o.length;n.length=0,i.freeAll(s),s.length=0;for(let l=0;l<r;l++){const c=o[l];if(!c.bone.active)continue;const a=c.appliedPose.attachment;if(a instanceof ut){n.push(a);let h=i.obtain();h.length!==a.worldVerticesLength&&(h=D.newFloatArray(a.worldVerticesLength)),s.push(h),a.computeWorldVertices(t,c,0,a.worldVerticesLength,h,0,2)}}e?this.aabbCompute():(this.minX=Number.POSITIVE_INFINITY,this.minY=Number.POSITIVE_INFINITY,this.maxX=Number.NEGATIVE_INFINITY,this.maxY=Number.NEGATIVE_INFINITY)}aabbCompute(){let t=Number.POSITIVE_INFLine truncated
|
||||
Vendored
+2
-2
@@ -8,8 +8,8 @@
|
||||
html, body { margin: 0; padding: 0; background: #111; color: #eee; font-family: system-ui, -apple-system, sans-serif; }
|
||||
#app { display: flex; flex-direction: column; height: 100vh; }
|
||||
</style>
|
||||
<script type="module" crossorigin src="/assets/index-CjEJ0XJ5.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-BwW3PUa0.css">
|
||||
<script type="module" crossorigin src="/assets/index-CkcQpCi2.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-_52DTWS7.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -0,0 +1,531 @@
|
||||
{
|
||||
"format": "SpineParticle.EditorConfig",
|
||||
"version": 1,
|
||||
"savedAt": "2026-10-22T03:44:07.350Z",
|
||||
"editor": {
|
||||
"viewScale": 0.7117802478134118,
|
||||
"viewX": 17.08734153523332,
|
||||
"viewY": 26.20117264599483
|
||||
},
|
||||
"settings": {
|
||||
"backgroundX": 0,
|
||||
"backgroundY": 0,
|
||||
"backgroundOpacity": 1,
|
||||
"backgroundImageName": "",
|
||||
"backgroundImageData": "",
|
||||
"showGrid": true,
|
||||
"exportSettings": {
|
||||
"imagesPath": "./images/",
|
||||
"spineVersion": "4.2",
|
||||
"keyframeCurve": "bezier",
|
||||
"fps": 30,
|
||||
"omitFps": false,
|
||||
"integerFrameAlignment": true,
|
||||
"bonePool": true,
|
||||
"excludeEmptyAnimations": false,
|
||||
"fileName": "SpineParticle.json"
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"fps": 30,
|
||||
"loop": true,
|
||||
"playbackStart": 0,
|
||||
"playbackEnd": 30,
|
||||
"animations": [
|
||||
"animation"
|
||||
]
|
||||
},
|
||||
"selection": {
|
||||
"type": "particle",
|
||||
"id": 1
|
||||
},
|
||||
"scene": {
|
||||
"systems": [
|
||||
{
|
||||
"id": 1,
|
||||
"visible": true,
|
||||
"animation": "animation",
|
||||
"config": {
|
||||
"imageResources": [
|
||||
{
|
||||
"id": 1,
|
||||
"textureName": "217cc2f5b2914d1716898385698d9eb17e352d97385b8-Fojf0Y",
|
||||
"textureFolder": "",
|
||||
"previewUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApIAAAKSCAYAAABhiDtmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEMTM4OTM1REExQzMxMUU3OENFN0IxN0YxNDFFOEQ5NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEMTM4OTM1RUExQzMxMUU3OENFN0IxN0YxNDFFOEQ5NSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQxMzg5MzVCQTFDMzExRTc4Q0U3QjE3RjE0MUU4RDk1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQxMzg5MzVDQTFDMzExRTc4Q0U3QjE3RjE0MUU4RDk1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+CRuTCgADgi1JREFUeNrsveuS5EaS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 truncated
|
||||
"imageMode": "fixed",
|
||||
"sequencePlayback": "loop-forward",
|
||||
"sequenceFps": 30,
|
||||
"sequenceFrames": [],
|
||||
"weight": 100,
|
||||
"locked": false,
|
||||
"scale": 1,
|
||||
"anchorX": 0.49090082662088885,
|
||||
"anchorY": 0.8530484713040866,
|
||||
"colorMode": "fixed",
|
||||
"colorStart": "#ffffff",
|
||||
"colorEnd": "#ff4d4d",
|
||||
"colorGradient": [
|
||||
{
|
||||
"position": 0,
|
||||
"color": "#ffffff"
|
||||
},
|
||||
{
|
||||
"position": 1,
|
||||
"color": "#ff4d4d"
|
||||
}
|
||||
],
|
||||
"blend": "add",
|
||||
"independentAlpha": "off",
|
||||
"alpha": 1,
|
||||
"alphaCurveMode": "跟随导出",
|
||||
"alphaCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": 0.1,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 0.9,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"imageWeightVersion": 1,
|
||||
"name": "ParticleSystem1",
|
||||
"mode": "stream",
|
||||
"rate": 20,
|
||||
"streamBehavior": "loop",
|
||||
"loopDurationFrames": 30,
|
||||
"generateLoopStartAnimation": false,
|
||||
"loopStartUseCustomDuration": false,
|
||||
"loopStartDurationFrames": 30,
|
||||
"generateLoopEndAnimation": false,
|
||||
"loopEndUseCustomDuration": false,
|
||||
"loopEndDurationFrames": 30,
|
||||
"burstCount": 50,
|
||||
"burstLoop": false,
|
||||
"delay": 0,
|
||||
"duration": 1,
|
||||
"shape": "point",
|
||||
"showShape": true,
|
||||
"shapeRangeVersion": 1,
|
||||
"innerRadius": 0,
|
||||
"outerRadius": 30,
|
||||
"innerRectW": 0,
|
||||
"innerRectH": 0,
|
||||
"outerRectW": 60,
|
||||
"outerRectH": 40,
|
||||
"spawnPathId": 0,
|
||||
"spawnPathDistribution": "fixed",
|
||||
"radius": 30,
|
||||
"rectW": 60,
|
||||
"rectH": 40,
|
||||
"centerX": 0,
|
||||
"centerY": 0,
|
||||
"rootRotation": 0,
|
||||
"rootScaleX": 1,
|
||||
"rootScaleY": 1,
|
||||
"renderLayerMode": "top",
|
||||
"renderLayerSpineId": 0,
|
||||
"renderLayerSlotName": "",
|
||||
"renderLayerSlotPosition": "above",
|
||||
"renderLayerFollowAttachment": false,
|
||||
"emissionAngleMode": "random",
|
||||
"direction": 0,
|
||||
"spread": 360,
|
||||
"coneDirection": 90,
|
||||
"coneAngle": 60,
|
||||
"lifeMin": 0.2,
|
||||
"lifeMax": 1,
|
||||
"lifeMode": "random",
|
||||
"lifeCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"speedMin": 0,
|
||||
"speedMax": 140,
|
||||
"speedMode": "fixed",
|
||||
"speedCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"scaleMin": 0.3,
|
||||
"scaleMax": 0.8,
|
||||
"scaleMode": "random",
|
||||
"scaleAxisMode": "uniform",
|
||||
"scaleYMin": 0.3,
|
||||
"scaleYMax": 0.8,
|
||||
"scaleCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"scaleYCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"scaleEndRatio": 0.3,
|
||||
"initialRotationMode": "random",
|
||||
"initialRotationMin": 0,
|
||||
"initialRotationMax": 360,
|
||||
"initialRotationCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"alpha": 0.9,
|
||||
"alphaEnd": 0,
|
||||
"rotationSpeedMin": -90,
|
||||
"rotationSpeedMax": 90,
|
||||
"speedOverLifeEnabled": false,
|
||||
"speedOverLifeMode": "fixed",
|
||||
"speedOverLifeMin": 1,
|
||||
"speedOverLifeMax": 1,
|
||||
"speedOverLifeCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"scaleOverLifeEnabled": true,
|
||||
"scaleOverLifeMode": "curve",
|
||||
"scaleOverLifeAxisMode": "uniform",
|
||||
"scaleOverLifeMin": 0,
|
||||
"scaleOverLifeMax": 1,
|
||||
"scaleYOverLifeMin": 0,
|
||||
"scaleYOverLifeMax": 1,
|
||||
"scaleOverLifeCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": 0.08,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 0.88,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 0
|
||||
}
|
||||
],
|
||||
"scaleYOverLifeCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"rotationOverLifeEnabled": true,
|
||||
"rotationOverLifeMode": "random",
|
||||
"rotationOverLifeCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"gravity": 980,
|
||||
"gravityMode": "fixed",
|
||||
"gravityMin": 980,
|
||||
"gravityMax": 980,
|
||||
"gravityDirection": -90,
|
||||
"gravityCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"damping": 0,
|
||||
"seed": 962221,
|
||||
"colorStart": "#ffffff",
|
||||
"colorEnd": "#ff4d4d",
|
||||
"colorOverLife": false,
|
||||
"blend": "add",
|
||||
"alphaMode": "curve",
|
||||
"curveMode": "线性",
|
||||
"alphaCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": 0.38,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 0.63,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 0
|
||||
}
|
||||
],
|
||||
"textureName": "star",
|
||||
"textureFolder": "",
|
||||
"alphaScale": 1,
|
||||
"anchorX": 0.5,
|
||||
"anchorY": 0.5,
|
||||
"independentAlpha": "off",
|
||||
"offsetX": 0,
|
||||
"offsetY": 0,
|
||||
"noise": false,
|
||||
"noiseAmt": 30,
|
||||
"noiseRange": 100,
|
||||
"noiseSpeed": 1,
|
||||
"useGravity": false,
|
||||
"wind": false,
|
||||
"windX": 0,
|
||||
"windY": 0,
|
||||
"windMode": "fixed",
|
||||
"windMin": 100,
|
||||
"windMax": 100,
|
||||
"windDirection": 0,
|
||||
"windCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"forceField": false,
|
||||
"forceStrength": 10,
|
||||
"forceRadius": 100,
|
||||
"forceCenterX": 0,
|
||||
"forceCenterY": 0,
|
||||
"forceFalloff": "linear",
|
||||
"showForceFieldShape": true,
|
||||
"vortex": false,
|
||||
"vortexStrength": 10,
|
||||
"vortexRadius": 100,
|
||||
"vortexCenterX": 0,
|
||||
"vortexCenterY": 0,
|
||||
"vortexFalloff": "linear",
|
||||
"showVortexShape": true,
|
||||
"attraction": false,
|
||||
"attractionCenterX": 200,
|
||||
"attractionCenterY": 0,
|
||||
"attractionRadius": 20,
|
||||
"attractionDuration": 0.5,
|
||||
"attractionDelay": 0.1,
|
||||
"attractionDelayMode": "particle",
|
||||
"attractionPath": "curve",
|
||||
"showAttractionShape": true,
|
||||
"trail": false,
|
||||
"trailConfigVersion": 3,
|
||||
"trailResources": [
|
||||
{
|
||||
"id": 1,
|
||||
"textureName": "trail",
|
||||
"previewUrl": "/images/trail.png",
|
||||
"weight": 100,
|
||||
"locked": false,
|
||||
"rotation": 0,
|
||||
"colorMode": "particle",
|
||||
"color": "#ffffff",
|
||||
"colorGradient": [
|
||||
{
|
||||
"position": 0,
|
||||
"color": "#ffffff"
|
||||
},
|
||||
{
|
||||
"position": 1,
|
||||
"color": "#ffffff"
|
||||
}
|
||||
],
|
||||
"blend": "normal",
|
||||
"alphaMode": "particle",
|
||||
"alpha": 1,
|
||||
"alphaCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"boneCount": 3,
|
||||
"trailRatio": 100,
|
||||
"lengthMode": "fixed",
|
||||
"length": 100,
|
||||
"lengthMin": 100,
|
||||
"lengthMax": 100,
|
||||
"widthSizeMode": "fixed",
|
||||
"width": 100,
|
||||
"widthMin": 100,
|
||||
"widthMax": 100,
|
||||
"widthMode": "particle",
|
||||
"lifeLengthEnabled": false,
|
||||
"lifeLengthCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"shapeEnabled": false,
|
||||
"shapeCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"trailResourceVersion": 6,
|
||||
"trailTextureName": "trail",
|
||||
"trailPreviewUrl": "/images/trail.png",
|
||||
"trailColorMode": "particle",
|
||||
"trailColor": "#ffffff",
|
||||
"trailColorGradient": [
|
||||
{
|
||||
"position": 0,
|
||||
"color": "#ffffff"
|
||||
},
|
||||
{
|
||||
"position": 1,
|
||||
"color": "#ffffff"
|
||||
}
|
||||
],
|
||||
"trailAlphaMode": "particle",
|
||||
"trailAlpha": 1,
|
||||
"trailAlphaCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"trailBoneCount": 3,
|
||||
"trailLength": 100,
|
||||
"trailWidth": 100,
|
||||
"trailWidthMode": "particle",
|
||||
"trailLifeLengthEnabled": false,
|
||||
"trailLifeLengthCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"trailShapeEnabled": false,
|
||||
"trailShapeCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 1
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"trailGridRows": 4,
|
||||
"trailGridCols": 4,
|
||||
"collision": false,
|
||||
"collisionColliderIds": [],
|
||||
"pathFollow": false,
|
||||
"emitterFollow": false,
|
||||
"emitterFollowMode": "none",
|
||||
"emitterFollowPathId": 0,
|
||||
"emitterFollowSpineId": 0,
|
||||
"emitterFollowBoneName": "",
|
||||
"emitterFollowBoneOffsetX": 0,
|
||||
"emitterFollowBoneOffsetY": 0,
|
||||
"emitterFollowBoneRotation": 0,
|
||||
"emitterFollowBoneScaleX": 1,
|
||||
"emitterFollowBoneScaleY": 1,
|
||||
"emitterAngleMode": "fixed",
|
||||
"emitterFollowCurve": [
|
||||
{
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
{
|
||||
"x": 1,
|
||||
"y": 1
|
||||
}
|
||||
],
|
||||
"emitterFollowDuration": 2,
|
||||
"emitterFollowSpace": "world",
|
||||
"emitterFollowDirection": "forward",
|
||||
"emitterFollowOffset": 0
|
||||
}
|
||||
}
|
||||
],
|
||||
"colliders": [],
|
||||
"paths": [],
|
||||
"spines": []
|
||||
}
|
||||
}
|
||||
File renamed without changes.
@@ -16,7 +16,11 @@
|
||||
"file": "4.雷电序列帧.json"
|
||||
},
|
||||
{
|
||||
"name": "5.SpineBoy",
|
||||
"file": "5.SpineBoy.json"
|
||||
"name": "5.贴图轴点",
|
||||
"file": "5.贴图轴点.json"
|
||||
},
|
||||
{
|
||||
"name": "6.SpineBoy",
|
||||
"file": "6.SpineBoy.json"
|
||||
}
|
||||
]
|
||||
@@ -57,12 +57,64 @@
|
||||
</button>
|
||||
</div>
|
||||
<slot />
|
||||
<div v-if="supportsPivot" class="pivot-toggle-row">
|
||||
<div class="pivot-toggle-icon">◎</div>
|
||||
<div class="pivot-toggle-text">
|
||||
<div class="pivot-toggle-title">贴图轴点</div>
|
||||
<div class="pivot-toggle-sub" :title="pivotSummary">{{ pivotSummary }}</div>
|
||||
</div>
|
||||
<label class="pivot-switch" :title="pivotOpen ? '收起轴点调整' : '展开轴点调整'">
|
||||
<input v-model="pivotOpen" type="checkbox" />
|
||||
<span class="pivot-switch-ui"></span>
|
||||
</label>
|
||||
</div>
|
||||
<PivotEditor
|
||||
v-if="supportsPivot && pivotOpen"
|
||||
:preview-url="displayPreviewUrl"
|
||||
:anchor-x="resource.anchorX ?? 0.5"
|
||||
:anchor-y="resource.anchorY ?? 0.5"
|
||||
@update:anchorX="resource.anchorX = $event"
|
||||
@update:anchorY="resource.anchorY = $event"
|
||||
@fullscreen="openPivotFullscreen"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="pivotFullscreen" class="pivot-modal-backdrop" @pointerdown.self="closePivotFullscreen(false)">
|
||||
<div class="pivot-modal" role="dialog" aria-modal="true" aria-label="贴图旋转轴点大图精修">
|
||||
<div class="pivot-modal-head">
|
||||
<div class="pivot-modal-icon">◎</div>
|
||||
<div class="pivot-modal-info">
|
||||
<div class="pivot-modal-title">
|
||||
贴图旋转轴点大图精修
|
||||
<span class="pivot-modal-badge">{{ resource.textureName || defaultFile }}</span>
|
||||
</div>
|
||||
<div class="pivot-modal-desc">在下方贴图上任意点击或拖拽，精确设置粒子的旋转/摆动中心</div>
|
||||
</div>
|
||||
<button type="button" class="pivot-modal-close" title="关闭" @click="closePivotFullscreen(false)">✕</button>
|
||||
</div>
|
||||
<div class="pivot-modal-hint">支持 100% ~ 400% 放大，精确对准尖端或根部：</div>
|
||||
<PivotEditor
|
||||
large
|
||||
:preview-url="displayPreviewUrl"
|
||||
:anchor-x="draftX"
|
||||
:anchor-y="draftY"
|
||||
@update:anchorX="draftX = $event"
|
||||
@update:anchorY="draftY = $event"
|
||||
/>
|
||||
<div class="pivot-modal-actions">
|
||||
<button type="button" class="pivot-modal-cancel" @click="closePivotFullscreen(false)">取消</button>
|
||||
<button type="button" class="pivot-modal-confirm" @click="closePivotFullscreen(true)">确定并保存轴点</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import NumSlider from './NumSlider.vue'
|
||||
import PivotEditor from './PivotEditor.vue'
|
||||
|
||||
type CommonImageResource = {
|
||||
id: number
|
||||
@@ -73,6 +125,8 @@ type CommonImageResource = {
|
||||
sequenceFrames?: Array<{ name: string; previewUrl: string }>
|
||||
textureName: string
|
||||
textureFolder?: string
|
||||
anchorX?: number
|
||||
anchorY?: number
|
||||
weight: number
|
||||
locked: boolean
|
||||
}
|
||||
@@ -115,6 +169,43 @@ const displayPreviewUrl = computed(() => props.resource.imageMode === 'sequence'
|
||||
? props.resource.sequenceFrames?.[0]?.previewUrl || ''
|
||||
: props.resource.previewUrl)
|
||||
|
||||
const pivotOpen = ref(false)
|
||||
const pivotFullscreen = ref(false)
|
||||
const draftX = ref(0.5)
|
||||
const draftY = ref(0.5)
|
||||
const supportsPivot = computed(() => typeof props.resource.anchorX === 'number' && typeof props.resource.anchorY === 'number')
|
||||
const pivotCentered = computed(() =>
|
||||
Math.abs((props.resource.anchorX ?? 0.5) - 0.5) < 1e-4 && Math.abs((props.resource.anchorY ?? 0.5) - 0.5) < 1e-4,
|
||||
)
|
||||
const pivotSummary = computed(() => {
|
||||
const x = (Math.min(1, Math.max(0, props.resource.anchorX ?? 0.5)) * 100).toFixed(1)
|
||||
const y = (Math.min(1, Math.max(0, props.resource.anchorY ?? 0.5)) * 100).toFixed(1)
|
||||
if (pivotOpen.value) return `已开启：X ${x}% | Y ${y}%`
|
||||
if (pivotCentered.value) return '未开启，默认围绕图片正中心 (50%, 50%)'
|
||||
return `轴点已自定义：X ${x}% | Y ${y}%`
|
||||
})
|
||||
|
||||
function openPivotFullscreen() {
|
||||
draftX.value = props.resource.anchorX ?? 0.5
|
||||
draftY.value = props.resource.anchorY ?? 0.5
|
||||
pivotFullscreen.value = true
|
||||
}
|
||||
|
||||
function closePivotFullscreen(commit: boolean) {
|
||||
if (commit) {
|
||||
props.resource.anchorX = draftX.value
|
||||
props.resource.anchorY = draftY.value
|
||||
}
|
||||
pivotFullscreen.value = false
|
||||
}
|
||||
|
||||
function onKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Escape' && pivotFullscreen.value) closePivotFullscreen(false)
|
||||
}
|
||||
|
||||
onMounted(() => window.addEventListener('keydown', onKeydown))
|
||||
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
|
||||
|
||||
const sequenceOrderText = computed(() => {
|
||||
const frames = props.resource.sequenceFrames || []
|
||||
if (!frames.length) return '未选择序列帧'
|
||||
@@ -156,4 +247,32 @@ function pickImage() {
|
||||
.weight-lock:hover:not(:disabled) { border-color: #7774ff; color: #b8b6ff; }
|
||||
.weight-lock.on { border-color: #7774ff; background: #514fd0; color: #fff; }
|
||||
.weight-lock:disabled { opacity: 0.35; cursor: not-allowed; }
|
||||
.pivot-toggle-row { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 8px 9px; border: 1px solid #2c3a54; border-radius: 8px; background: #131b28; }
|
||||
.pivot-toggle-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border: 1px solid #35435c; border-radius: 7px; background: #1c2638; color: #8f8cff; font-size: 17px; }
|
||||
.pivot-toggle-text { flex: 1; min-width: 0; }
|
||||
.pivot-toggle-title { color: #d6deee; font-size: 12px; font-weight: 600; }
|
||||
.pivot-toggle-sub { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7584a0; font-size: 9px; }
|
||||
.pivot-switch { position: relative; flex: 0 0 auto; cursor: pointer; }
|
||||
.pivot-switch input { position: absolute; opacity: 0; pointer-events: none; }
|
||||
.pivot-switch-ui { position: relative; display: block; width: 34px; height: 19px; border-radius: 10px; background: #354258; transition: background .16s ease; }
|
||||
.pivot-switch-ui::after { content: ''; position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .16s ease; }
|
||||
.pivot-switch input:checked + .pivot-switch-ui { background: #625ff1; }
|
||||
.pivot-switch input:checked + .pivot-switch-ui::after { transform: translateX(15px); }
|
||||
|
||||
.pivot-modal-backdrop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 9, 15, .78); backdrop-filter: blur(2px); }
|
||||
.pivot-modal { display: flex; flex-direction: column; width: min(980px, 94vw); max-height: 92vh; overflow: auto; padding: 14px; border: 1px solid #2f3f5c; border-radius: 14px; background: #121927; box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
|
||||
.pivot-modal-head { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #253148; }
|
||||
.pivot-modal-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #3b4a66; border-radius: 8px; background: #1c2638; color: #8f8cff; font-size: 18px; }
|
||||
.pivot-modal-info { flex: 1; min-width: 0; }
|
||||
.pivot-modal-title { display: flex; align-items: center; gap: 7px; color: #e4e9f5; font-size: 15px; font-weight: 700; }
|
||||
.pivot-modal-badge { padding: 2px 7px; border: 1px solid #4b4a8f; border-radius: 999px; background: #2c2b58; color: #b9b6ff; font-size: 10px; font-weight: 500; }
|
||||
.pivot-modal-desc { margin-top: 3px; color: #7f8daa; font-size: 11px; }
|
||||
.pivot-modal-close { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #8b98b3; font-size: 15px; cursor: pointer; }
|
||||
.pivot-modal-close:hover { background: #253148; color: #fff; }
|
||||
.pivot-modal-hint { margin: 10px 0 0; color: #8b98b3; font-size: 11px; }
|
||||
.pivot-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #253148; }
|
||||
.pivot-modal-cancel { height: 34px; padding: 0 16px; border: 1px solid #34435e; border-radius: 7px; background: #1a2334; color: #a9b6d0; font-size: 12px; cursor: pointer; }
|
||||
.pivot-modal-cancel:hover { border-color: #5d5aa8; color: #fff; }
|
||||
.pivot-modal-confirm { height: 34px; padding: 0 22px; border: 1px solid #7774ff; border-radius: 7px; background: #5b57e8; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
|
||||
.pivot-modal-confirm:hover { background: #6a66ff; }
|
||||
</style>
|
||||
@@ -0,0 +1,393 @@
|
||||
<template>
|
||||
<div class="pivot-editor" :class="{ 'pivot-large': large }">
|
||||
<div class="pivot-toolbar">
|
||||
<div class="pivot-hint">
|
||||
<span class="pivot-hint-icon">⊕</span>
|
||||
<span>贴图轴点</span>
|
||||
</div>
|
||||
<div class="pivot-zoom">
|
||||
<button type="button" :disabled="zoom <= 100" title="缩小" @click="zoomBy(-25)">−</button>
|
||||
<span>{{ zoom }}%</span>
|
||||
<button type="button" :disabled="zoom >= 400" title="放大" @click="zoomBy(25)">＋</button>
|
||||
</div>
|
||||
<button v-if="!large" type="button" class="pivot-expand" title="放大到全屏操作" @click="$emit('fullscreen')">⤢</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref="stageRef"
|
||||
class="pivot-stage"
|
||||
:class="{ panning }"
|
||||
title="左键点击/拖动设置轴点 · 右键拖动画布 · 滚轮缩放"
|
||||
@pointerdown="onPointerDown"
|
||||
@wheel.prevent="onWheel"
|
||||
@contextmenu.prevent
|
||||
>
|
||||
<div v-if="previewUrl" ref="boxRef" class="pivot-box" :style="boxStyle">
|
||||
<img :src="previewUrl" alt="轴点预览" draggable="false" @load="onImageLoad" />
|
||||
</div>
|
||||
<template v-if="previewUrl">
|
||||
<!-- 准线与轴点放在缩放容器之外：尺寸恒定，准线贯穿整个交互区。 -->
|
||||
<div class="pivot-cross vertical" :style="{ left: `${pivotScreen.x}px` }"></div>
|
||||
<div class="pivot-cross horizontal" :style="{ top: `${pivotScreen.y}px` }"></div>
|
||||
<div class="pivot-marker" :style="{ left: `${pivotScreen.x}px`, top: `${pivotScreen.y}px` }"></div>
|
||||
<div class="pivot-badge" :style="{ left: `${pivotScreen.x}px`, top: `${pivotScreen.y}px` }">X: {{ anchorXText }}% | Y: {{ anchorYText }}%</div>
|
||||
</template>
|
||||
<div v-else class="pivot-empty">未选择图片</div>
|
||||
</div>
|
||||
|
||||
<div class="pivot-bottom">
|
||||
<div class="pivot-card">
|
||||
<div class="pivot-presets">
|
||||
<button
|
||||
v-for="preset in presets"
|
||||
:key="preset.label"
|
||||
type="button"
|
||||
class="pivot-preset"
|
||||
:class="{ on: isPreset(preset) }"
|
||||
:title="`${preset.label}（${preset.x}%, ${preset.y}%）`"
|
||||
:aria-label="preset.label"
|
||||
@click="pickPreset(preset)"
|
||||
>{{ preset.icon }}</button>
|
||||
</div>
|
||||
<button type="button" class="pivot-reset" @click="resetCenter">↺ 复位居中 (50%, 50%)</button>
|
||||
</div>
|
||||
<div class="pivot-card">
|
||||
<div class="pivot-card-head"><span><span class="pivot-card-icon">◎</span> 轴点坐标(%)</span></div>
|
||||
<div class="pivot-coords">
|
||||
<label>X:
|
||||
<input type="number" min="0" max="100" step="0.1" :value="anchorXText" @input="updateCoord('x', $event)" />
|
||||
<span>%</span>
|
||||
</label>
|
||||
<label>Y:
|
||||
<input type="number" min="0" max="100" step="0.1" :value="anchorYText" @input="updateCoord('y', $event)" />
|
||||
<span>%</span>
|
||||
</label>
|
||||
</div>
|
||||
<!-- 旋转测试只在大图精修时显示，避免内联面板过高。 -->
|
||||
<template v-if="large">
|
||||
<div class="pivot-card-head pivot-rotate-head">
|
||||
<span><span class="pivot-card-icon">✥</span> 轴心旋转测试</span>
|
||||
<span class="pivot-rotate-state">{{ rotationMode === 'static' ? '静止' : rotationMode === 'spin' ? '自转' : '摆动' }}</span>
|
||||
</div>
|
||||
<div class="pivot-rotate-body">
|
||||
<div class="pivot-rotate-modes">
|
||||
<button type="button" :class="{ on: rotationMode === 'static' }" @click="rotationMode = 'static'">静止</button>
|
||||
<button type="button" :class="{ on: rotationMode === 'spin' }" @click="rotationMode = 'spin'">↻ 自转</button>
|
||||
<button type="button" :class="{ on: rotationMode === 'swing' }" @click="rotationMode = 'swing'">⇄ 摆动</button>
|
||||
</div>
|
||||
<div class="pivot-rotate-preview">
|
||||
<img
|
||||
v-if="previewUrl"
|
||||
:src="previewUrl"
|
||||
alt="旋转测试"
|
||||
draggable="false"
|
||||
:class="rotationMode"
|
||||
:style="rotateStyle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
previewUrl: string
|
||||
anchorX: number
|
||||
anchorY: number
|
||||
large?: boolean
|
||||
}>(), {
|
||||
large: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:anchorX': [number]
|
||||
'update:anchorY': [number]
|
||||
fullscreen: []
|
||||
}>()
|
||||
|
||||
const presets = [
|
||||
{ icon: '↖', label: '左上', x: 0, y: 0 },
|
||||
{ icon: '↑', label: '正上', x: 50, y: 0 },
|
||||
{ icon: '↗', label: '右上', x: 100, y: 0 },
|
||||
{ icon: '←', label: '正左', x: 0, y: 50 },
|
||||
{ icon: '◯', label: '正中', x: 50, y: 50 },
|
||||
{ icon: '→', label: '正右', x: 100, y: 50 },
|
||||
{ icon: '↙', label: '左下', x: 0, y: 100 },
|
||||
{ icon: '↓', label: '正下·底部', x: 50, y: 100 },
|
||||
{ icon: '↘', label: '右下', x: 100, y: 100 },
|
||||
]
|
||||
|
||||
const stageRef = ref<HTMLElement | null>(null)
|
||||
const boxRef = ref<HTMLElement | null>(null)
|
||||
const stageSize = ref({ w: 0, h: 0 })
|
||||
const natural = ref({ w: 1, h: 1 })
|
||||
const zoom = ref(100)
|
||||
const pan = ref({ x: 0, y: 0 })
|
||||
const panning = ref(false)
|
||||
const rotationMode = ref<'static' | 'spin' | 'swing'>('static')
|
||||
|
||||
let observer: ResizeObserver | null = null
|
||||
|
||||
const clampPercent = (value: number) => Math.min(100, Math.max(0, Number.isFinite(value) ? value : 0))
|
||||
const anchorXText = computed(() => (clampPercent(props.anchorX * 100)).toFixed(1))
|
||||
const anchorYText = computed(() => (clampPercent(props.anchorY * 100)).toFixed(1))
|
||||
|
||||
function contain(width: number, height: number) {
|
||||
const ratio = natural.value.w / Math.max(1, natural.value.h)
|
||||
let w = width
|
||||
let h = w / ratio
|
||||
if (h > height) { h = height; w = h * ratio }
|
||||
return { w: Math.max(1, w), h: Math.max(1, h) }
|
||||
}
|
||||
|
||||
const fit = computed(() => {
|
||||
const pad = props.large ? 26 : 12
|
||||
const width = Math.max(1, stageSize.value.w - pad * 2)
|
||||
const height = Math.max(1, stageSize.value.h - pad * 2)
|
||||
return contain(width, height)
|
||||
})
|
||||
|
||||
const boxStyle = computed(() => ({
|
||||
width: `${fit.value.w}px`,
|
||||
height: `${fit.value.h}px`,
|
||||
transform: `translate(${pan.value.x}px, ${pan.value.y}px) scale(${zoom.value / 100})`,
|
||||
}))
|
||||
|
||||
/** 轴点在交互区中的屏幕坐标：跟随缩放/平移，但轴点本身不随缩放变大。 */
|
||||
const pivotScreen = computed(() => {
|
||||
const scale = zoom.value / 100
|
||||
return {
|
||||
x: stageSize.value.w / 2 + pan.value.x + (clampPercent(props.anchorX * 100) / 100 - 0.5) * fit.value.w * scale,
|
||||
y: stageSize.value.h / 2 + pan.value.y + (clampPercent(props.anchorY * 100) / 100 - 0.5) * fit.value.h * scale,
|
||||
}
|
||||
})
|
||||
|
||||
const rotateStyle = computed(() => {
|
||||
const size = props.large ? 128 : 72
|
||||
const box = contain(size, size)
|
||||
return {
|
||||
width: `${box.w}px`,
|
||||
height: `${box.h}px`,
|
||||
transformOrigin: `${clampPercent(props.anchorX * 100)}% ${clampPercent(props.anchorY * 100)}%`,
|
||||
}
|
||||
})
|
||||
|
||||
function setAnchor(x: number, y: number) {
|
||||
emit('update:anchorX', Math.min(1, Math.max(0, Number.isFinite(x) ? x : 0)))
|
||||
emit('update:anchorY', Math.min(1, Math.max(0, Number.isFinite(y) ? y : 0)))
|
||||
}
|
||||
|
||||
function updateFromPointer(event: PointerEvent) {
|
||||
const box = boxRef.value
|
||||
if (!box) return
|
||||
const rect = box.getBoundingClientRect()
|
||||
if (rect.width <= 0 || rect.height <= 0) return
|
||||
setAnchor(
|
||||
(event.clientX - rect.left) / rect.width,
|
||||
(event.clientY - rect.top) / rect.height,
|
||||
)
|
||||
}
|
||||
|
||||
function onPointerDown(event: PointerEvent) {
|
||||
if (!props.previewUrl) return
|
||||
if (event.button === 2) {
|
||||
startPan(event)
|
||||
return
|
||||
}
|
||||
if (event.button !== 0) return
|
||||
event.preventDefault()
|
||||
updateFromPointer(event)
|
||||
const move = (ev: PointerEvent) => updateFromPointer(ev)
|
||||
const up = () => {
|
||||
window.removeEventListener('pointermove', move)
|
||||
window.removeEventListener('pointerup', up)
|
||||
window.removeEventListener('pointercancel', up)
|
||||
}
|
||||
window.addEventListener('pointermove', move)
|
||||
window.addEventListener('pointerup', up)
|
||||
window.addEventListener('pointercancel', up)
|
||||
}
|
||||
|
||||
/** 右键拖动画布：只平移视图，不改变轴点。 */
|
||||
function startPan(event: PointerEvent) {
|
||||
event.preventDefault()
|
||||
panning.value = true
|
||||
const startX = event.clientX
|
||||
const startY = event.clientY
|
||||
const originX = pan.value.x
|
||||
const originY = pan.value.y
|
||||
const move = (ev: PointerEvent) => {
|
||||
pan.value = { x: originX + ev.clientX - startX, y: originY + ev.clientY - startY }
|
||||
}
|
||||
const up = () => {
|
||||
panning.value = false
|
||||
window.removeEventListener('pointermove', move)
|
||||
window.removeEventListener('pointerup', up)
|
||||
window.removeEventListener('pointercancel', up)
|
||||
}
|
||||
window.addEventListener('pointermove', move)
|
||||
window.addEventListener('pointerup', up)
|
||||
window.addEventListener('pointercancel', up)
|
||||
}
|
||||
|
||||
/** 滚轮以鼠标位置为中心缩放画布，100% ~ 400%。 */
|
||||
function onWheel(event: WheelEvent) {
|
||||
const factor = event.deltaY < 0 ? 1.12 : 1 / 1.12
|
||||
const nextZoom = Math.min(400, Math.max(100, Math.round(zoom.value * factor)))
|
||||
if (nextZoom === zoom.value) return
|
||||
const stage = stageRef.value
|
||||
if (!stage) {
|
||||
zoom.value = nextZoom
|
||||
return
|
||||
}
|
||||
const rect = stage.getBoundingClientRect()
|
||||
const cursorX = event.clientX - rect.left
|
||||
const cursorY = event.clientY - rect.top
|
||||
const ratio = nextZoom / zoom.value
|
||||
// 未变换时图片盒中心与舞台中心重合；缩放时保持鼠标下的点不动。
|
||||
pan.value = {
|
||||
x: pan.value.x + (cursorX - rect.width / 2 - pan.value.x) * (1 - ratio),
|
||||
y: pan.value.y + (cursorY - rect.height / 2 - pan.value.y) * (1 - ratio),
|
||||
}
|
||||
zoom.value = nextZoom
|
||||
}
|
||||
|
||||
function onImageLoad(event: Event) {
|
||||
const image = event.target as HTMLImageElement
|
||||
natural.value = { w: image.naturalWidth || 1, h: image.naturalHeight || 1 }
|
||||
}
|
||||
|
||||
function zoomBy(delta: number) {
|
||||
zoom.value = Math.min(400, Math.max(100, zoom.value + delta))
|
||||
}
|
||||
|
||||
function resetCenter() {
|
||||
setAnchor(0.5, 0.5)
|
||||
}
|
||||
|
||||
function pickPreset(preset: { x: number; y: number }) {
|
||||
setAnchor(preset.x / 100, preset.y / 100)
|
||||
}
|
||||
|
||||
function isPreset(preset: { x: number; y: number }) {
|
||||
return Math.abs(clampPercent(props.anchorX * 100) - preset.x) < 0.05
|
||||
&& Math.abs(clampPercent(props.anchorY * 100) - preset.y) < 0.05
|
||||
}
|
||||
|
||||
function updateCoord(axis: 'x' | 'y', event: Event) {
|
||||
const value = clampPercent(Number((event.target as HTMLInputElement).value))
|
||||
if (axis === 'x') emit('update:anchorX', value / 100)
|
||||
else emit('update:anchorY', value / 100)
|
||||
}
|
||||
|
||||
watch(() => props.previewUrl, () => {
|
||||
natural.value = { w: 1, h: 1 }
|
||||
pan.value = { x: 0, y: 0 }
|
||||
zoom.value = 100
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!stageRef.value) return
|
||||
observer = new ResizeObserver((entries) => {
|
||||
const rect = entries[0]?.contentRect
|
||||
if (rect) stageSize.value = { w: rect.width, h: rect.height }
|
||||
})
|
||||
observer.observe(stageRef.value)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
observer?.disconnect()
|
||||
observer = null
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pivot-editor { margin-top: 8px; padding: 8px; border: 1px solid #2e3c55; border-radius: 8px; background: #121a27; }
|
||||
.pivot-toolbar { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
|
||||
.pivot-hint { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; color: #9aa8c4; font-size: 10px; line-height: 1.3; }
|
||||
.pivot-hint-icon { color: #8f8cff; font-size: 13px; }
|
||||
.pivot-zoom { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid #34435e; border-radius: 6px; background: #182234; }
|
||||
.pivot-zoom button { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #a9b6d0; font-size: 13px; cursor: pointer; }
|
||||
.pivot-zoom button:hover:not(:disabled) { background: #2a3853; color: #fff; }
|
||||
.pivot-zoom button:disabled { opacity: .3; cursor: default; }
|
||||
.pivot-zoom span { min-width: 36px; text-align: center; color: #c7d1e6; font-size: 10px; font-variant-numeric: tabular-nums; }
|
||||
.pivot-expand { width: 24px; height: 24px; padding: 0; border: 1px solid #34435e; border-radius: 6px; background: #182234; color: #a9b6d0; font-size: 13px; cursor: pointer; }
|
||||
.pivot-expand:hover { border-color: #7774ff; color: #fff; }
|
||||
|
||||
.pivot-stage {
|
||||
position: relative; display: flex; align-items: center; justify-content: center;
|
||||
width: 100%; height: 156px; overflow: hidden;
|
||||
border: 1px solid #2f3d57; border-radius: 8px;
|
||||
background-color: #10161f;
|
||||
background-image:
|
||||
linear-gradient(45deg, #1a2230 25%, transparent 25%),
|
||||
linear-gradient(-45deg, #1a2230 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #1a2230 75%),
|
||||
linear-gradient(-45deg, transparent 75%, #1a2230 75%);
|
||||
background-size: 16px 16px;
|
||||
background-position: 0 0, 0 8px, 8px -8px, -8px 0;
|
||||
touch-action: none; cursor: crosshair;
|
||||
}
|
||||
.pivot-large .pivot-stage { height: 340px; background-size: 22px 22px; background-position: 0 0, 0 11px, 11px -11px, -11px 0; }
|
||||
.pivot-stage.panning { cursor: grabbing; }
|
||||
.pivot-box { position: relative; flex: 0 0 auto; }
|
||||
.pivot-box > img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
|
||||
.pivot-empty { color: #4e5a70; font-size: 12px; }
|
||||
.pivot-cross { position: absolute; pointer-events: none; background: rgba(126, 118, 255, .75); box-shadow: 0 0 3px rgba(126, 118, 255, .6); }
|
||||
.pivot-cross.vertical { top: 0; bottom: 0; width: 1px; transform: translateX(-.5px); }
|
||||
.pivot-cross.horizontal { left: 0; right: 0; height: 1px; transform: translateY(-.5px); }
|
||||
.pivot-marker {
|
||||
position: absolute; width: 13px; height: 13px; transform: translate(-50%, -50%);
|
||||
border: 2px solid #c9c6ff; border-radius: 50%;
|
||||
background: rgba(96, 95, 240, .85);
|
||||
box-shadow: 0 0 0 3px rgba(96, 95, 240, .28), 0 0 10px rgba(96, 95, 240, .8);
|
||||
pointer-events: none;
|
||||
}
|
||||
.pivot-badge {
|
||||
position: absolute; transform: translate(-50%, 14px);
|
||||
padding: 2px 6px; border: 1px solid #6f6bc7; border-radius: 4px;
|
||||
background: rgba(25, 28, 58, .92); color: #b9b6ff;
|
||||
font-size: 9px; white-space: nowrap; pointer-events: none;
|
||||
}
|
||||
|
||||
.pivot-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
|
||||
.pivot-large .pivot-bottom { gap: 14px; margin-top: 14px; }
|
||||
.pivot-card { min-width: 0; padding: 7px; border: 1px solid #28344a; border-radius: 8px; background: #151d2b; }
|
||||
.pivot-card-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 6px; color: #b9c4da; font-size: 10px; }
|
||||
.pivot-card-icon { color: #8f8cff; }
|
||||
.pivot-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
|
||||
.pivot-preset { height: 30px; padding: 0; border: 1px solid #2f3d57; border-radius: 5px; background: #1b2537; color: #aab6cf; font-size: 16px; line-height: 1; cursor: pointer; }
|
||||
.pivot-preset:hover { border-color: #5d5aa8; color: #d9d8ff; }
|
||||
.pivot-preset.on { border-color: #7774ff; background: #4a47b5; color: #fff; }
|
||||
.pivot-reset { display: block; width: 100%; height: 26px; margin-top: 6px; padding: 0 6px; border: 1px solid #2f3d57; border-radius: 5px; background: #1a2435; color: #96a4c0; font-size: 10px; cursor: pointer; white-space: nowrap; }
|
||||
.pivot-reset:hover { border-color: #5d5aa8; background: #232f46; color: #d9d8ff; }
|
||||
.pivot-coords { display: flex; flex-direction: column; gap: 5px; }
|
||||
.pivot-large .pivot-coords { flex-direction: row; gap: 8px; }
|
||||
.pivot-coords label { flex: 1; display: flex; align-items: center; gap: 3px; color: #8d9ab5; font-size: 10px; }
|
||||
.pivot-coords input { width: 100%; min-width: 0; height: 24px; padding: 0 4px; border: 1px solid #34435e; border-radius: 4px; background: #101827; color: #f0b465; font-size: 11px; text-align: right; }
|
||||
.pivot-rotate-head { margin-top: 10px; }
|
||||
.pivot-rotate-state { color: #6f7c96; font-size: 9px; }
|
||||
.pivot-rotate-body { display: flex; align-items: center; gap: 7px; }
|
||||
.pivot-rotate-modes { display: flex; flex-direction: column; gap: 4px; flex: 1; }
|
||||
.pivot-rotate-modes button { height: 24px; padding: 0 5px; border: 1px solid #2f3d57; border-radius: 5px; background: #1b2537; color: #93a0ba; font-size: 9px; cursor: pointer; }
|
||||
.pivot-rotate-modes button.on { border-color: #7774ff; background: #4a47b5; color: #fff; }
|
||||
.pivot-rotate-preview { display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; flex: 0 0 78px; border: 1px solid #2b374d; border-radius: 6px; background: #10161f; overflow: hidden; }
|
||||
.pivot-large .pivot-rotate-preview { width: 128px; height: 128px; flex-basis: 128px; }
|
||||
.pivot-rotate-preview img { display: block; }
|
||||
.pivot-rotate-preview img.spin { animation: pivot-spin 2s linear infinite; }
|
||||
.pivot-rotate-preview img.swing { animation: pivot-swing 1.1s ease-in-out infinite alternate; }
|
||||
@keyframes pivot-spin { to { transform: rotate(360deg); } }
|
||||
@keyframes pivot-swing { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
|
||||
|
||||
.pivot-large .pivot-hint { font-size: 12px; }
|
||||
.pivot-large .pivot-card-head { font-size: 12px; }
|
||||
.pivot-large .pivot-preset { height: 42px; font-size: 20px; }
|
||||
.pivot-large .pivot-reset { height: 34px; margin-top: 8px; font-size: 12px; }
|
||||
.pivot-large .pivot-coords input { height: 34px; font-size: 14px; }
|
||||
.pivot-large .pivot-rotate-modes button { height: 34px; font-size: 12px; }
|
||||
</style>
|
||||
@@ -100,7 +100,6 @@
|
||||
@toggle-lock="toggleResourceLock"
|
||||
>
|
||||
<NumSlider label="缩放" :min="0.1" :max="3" :step="0.05" v-model="resource.scale" />
|
||||
<label class="row"><span>轴心 x,y</span><input type="number" step="0.05" class="inp tiny" v-model.number="resource.anchorX" /><input type="number" step="0.05" class="inp tiny" v-model.number="resource.anchorY" /></label>
|
||||
|
||||
<div class="resource-divider"></div>
|
||||
<label class="row resource-color-row"><span>颜色</span>
|
||||
|
||||
Reference in new issue
Block a user