robin/mapboundaries
1
0
Fork 0
mirror of https://github.com/icewind1991/mapboundaries.git synced 2026-06-03 10:54:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix alligning

Browse source
This commit is contained in:
Robin Appelman 2017-04-15 00:41:09 +02:00
commit 58a3527ff3
2 changed files with 32 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/App.tsx
View file

@ -84,10 +84,29 @@ export class App extends React.Component<{}, AppState> {
const originalHeight = 1024 * this.state.scale; // 1024 is a magic number straight from cl_leveloverview code const originalHeight = 1024 * this.state.scale; // 1024 is a magic number straight from cl_leveloverview code
const originalWidth = originalHeight * (this.state.originalWidth / this.state.originalHeight); const originalWidth = originalHeight * (this.state.originalWidth / this.state.originalHeight);
const width = originalWidth / this.state.originalWidth * this.state.imageWidth; const width = (originalWidth / this.state.originalWidth) * this.state.imageWidth;
const height = originalHeight / this.state.originalHeight * this.state.imageHeight; const height = (originalHeight / this.state.originalHeight) * this.state.imageHeight;
return {width: width / 10, height: height / 10}; return {width: width, height: height};
}
getCorners() {
const originalHeight = 1024 * this.state.scale; // 1024 is a magic number straight from cl_leveloverview code
const originalWidth = originalHeight * (this.state.originalWidth / this.state.originalHeight);
const width = (originalWidth / this.state.originalWidth) * this.state.imageWidth;
const height = (originalHeight / this.state.originalHeight) * this.state.imageHeight;
return {
boundaryMin: {
x: this.state.x - Math.floor(width / 2),
y: this.state.y - Math.floor(height / 2)
},
boundaryMax: {
x: this.state.x + Math.floor(width / 2),
y: this.state.y + Math.floor(height / 2)
}
}
} }
render() { render() {
@ -95,10 +114,8 @@ export class App extends React.Component<{}, AppState> {
const demoWidth = (this.state.world.boundaryMax.x - this.state.world.boundaryMin.x) / 10; const demoWidth = (this.state.world.boundaryMax.x - this.state.world.boundaryMin.x) / 10;
const demoHeight = (this.state.world.boundaryMax.y - this.state.world.boundaryMin.y) / 10; const demoHeight = (this.state.world.boundaryMax.y - this.state.world.boundaryMin.y) / 10;
const offsetX = Math.floor((this.state.x - this.state.world.boundaryMin.x) / 10) - Math.floor(width / 2); const offsetX = Math.floor((this.state.x - this.state.world.boundaryMin.x - width / 2) / 10);
const offsetY = Math.floor((this.state.y - this.state.world.boundaryMin.y) / 10) - Math.floor(height / 2); const offsetY = Math.floor((this.state.world.boundaryMax.y - this.state.y - height / 2) / 10);
const topLeft = (this.state.x - this.state.world.boundaryMin.x);
return <div> return <div>
<input onChange={this.onNumberInputChange.bind(this, 'scale')} <input onChange={this.onNumberInputChange.bind(this, 'scale')}
@ -115,8 +132,8 @@ export class App extends React.Component<{}, AppState> {
<input onChange={this.onSelectDemo} type="file"/> <input onChange={this.onSelectDemo} type="file"/>
<MapContainer contentSize={{width: demoWidth, height: demoHeight}}> <MapContainer contentSize={{width: demoWidth, height: demoHeight}}>
<img className="background" src={this.state.background || ''} <img className="background" src={this.state.background || ''}
width={width} width={width / 10}
height={height} height={height / 10}
style={{ style={{
top: offsetY + 'px', top: offsetY + 'px',
left: offsetX + 'px', left: offsetX + 'px',
@ -133,6 +150,9 @@ export class App extends React.Component<{}, AppState> {
onChange={this.onNumberInputChange.bind(this, 'y')} onChange={this.onNumberInputChange.bind(this, 'y')}
placeholder="y" type="number" placeholder="y" type="number"
value={this.state.y}/> value={this.state.y}/>
<p>
<pre>{JSON.stringify(this.getCorners(), null, 4)}</pre>
</p>
</div>; </div>;
} }
} }

4
src/DemoRender.ts
View file

@ -12,11 +12,13 @@ export class DemoRender {
const scale = Math.max(scaleX, scaleY); const scale = Math.max(scaleX, scaleY);
const boundaryMin = match.world.boundaryMin; const boundaryMin = match.world.boundaryMin;
const boundaryMax = match.world.boundaryMax;
console.log(boundaryMin, boundaryMax, width, height);
const translatePosition = (position) => { const translatePosition = (position) => {
return { return {
x: Math.floor(position.x - boundaryMin.x) * scale, x: Math.floor(position.x - boundaryMin.x) * scale,
y: height - Math.floor(position.y - boundaryMin.y) * scale y: Math.floor(boundaryMax.y - position.y) * scale
} }
}; };