-
Notifications
You must be signed in to change notification settings - Fork 633
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(layer): add point line polygon image layer
- Loading branch information
Showing
45 changed files
with
1,452 additions
and
169 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { ITexture2D } from '../renderer/ITexture2D'; | ||
export type IImage = HTMLImageElement | File | string; | ||
export interface IIconValue { | ||
x: number; | ||
y: number; | ||
image: HTMLImageElement; | ||
} | ||
export interface IIcon { | ||
id: string; | ||
image: HTMLImageElement; | ||
height: number; | ||
width: number; | ||
} | ||
export interface IICONMap { | ||
[key: string]: IIconValue; | ||
} | ||
export interface IIconService { | ||
addImage(id: string, image: IImage): void; | ||
getTexture(): ITexture2D; | ||
getIconMap(): IICONMap; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import { inject, injectable } from 'inversify'; | ||
import { buildIconMaping } from '../../utils/font_util'; | ||
import { ITexture2D } from '../renderer/ITexture2D'; | ||
import { | ||
IIcon, | ||
IICONMap, | ||
IIconService, | ||
IIconValue, | ||
IImage, | ||
} from './IIconService'; | ||
const BUFFER = 3; | ||
const MAX_CANVAS_WIDTH = 1024; | ||
const imageSize = 64; | ||
@injectable() | ||
export default class IconService implements IIconService { | ||
private canvas: HTMLCanvasElement; | ||
private iconData: IIcon[]; | ||
private iconMap: IICONMap; | ||
private canvasHeigth: number; | ||
private textrure: ITexture2D; | ||
private ctx: CanvasRenderingContext2D; | ||
|
||
constructor() { | ||
this.iconData = []; | ||
this.iconMap = {}; | ||
this.canvas = document.createElement('canvas'); | ||
// this.texture = | ||
this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D; | ||
} | ||
|
||
public async addImage(id: string, image: IImage) { | ||
const imagedata = (await this.loadImage(image)) as HTMLImageElement; | ||
this.iconData.push({ | ||
id, | ||
image: imagedata, | ||
width: imageSize, | ||
height: imageSize, | ||
}); | ||
const { mapping, canvasHeight } = buildIconMaping( | ||
this.iconData, | ||
BUFFER, | ||
MAX_CANVAS_WIDTH, | ||
); | ||
this.iconMap = mapping; | ||
this.canvasHeigth = canvasHeight; | ||
this.updateIconAtlas(); | ||
} | ||
|
||
public getTexture(): ITexture2D { | ||
throw new Error('Method not implemented.'); | ||
} | ||
|
||
public getIconMap() { | ||
return this.iconMap; | ||
} | ||
|
||
private updateIconAtlas() { | ||
this.canvas.width = MAX_CANVAS_WIDTH; | ||
this.canvas.height = this.canvasHeigth; | ||
Object.keys(this.iconMap).forEach((item: string) => { | ||
const { x, y, image } = this.iconMap[item]; | ||
this.ctx.drawImage(image, x, y, imageSize, imageSize); | ||
}); | ||
// this.texture.magFilter = THREE.LinearFilter; | ||
// this.texture.minFilter = THREE.LinearFilter; | ||
// this.texture.needsUpdate = true; | ||
} | ||
|
||
private loadImage(url: IImage) { | ||
return new Promise((resolve, reject) => { | ||
if (url instanceof HTMLImageElement) { | ||
resolve(url); | ||
return; | ||
} | ||
const image = new Image(); | ||
image.onload = () => { | ||
resolve(image); | ||
}; | ||
image.onerror = () => { | ||
reject(new Error('Could not load image at ' + url)); | ||
}; | ||
image.src = url instanceof File ? URL.createObjectURL(url) : url; | ||
}); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import { | ||
IIcon, | ||
IICONMap, | ||
IIconService, | ||
IIconValue, | ||
IImage, | ||
} from '../services/asset/IIconService'; | ||
export function buildIconMaping( | ||
icons: IIcon[], | ||
buffer: number, | ||
maxCanvasWidth: number, | ||
) { | ||
let xOffset = 0; | ||
let yOffset = 0; | ||
let rowHeight = 0; | ||
let columns = []; | ||
const mapping: IICONMap = {}; | ||
for (const icon of icons) { | ||
if (!mapping[icon.id]) { | ||
const { height, width } = icon; | ||
|
||
// fill one row | ||
if (xOffset + width + buffer > maxCanvasWidth) { | ||
buildRowMapping(mapping, columns, yOffset); | ||
|
||
xOffset = 0; | ||
yOffset = rowHeight + yOffset + buffer; | ||
rowHeight = 0; | ||
columns = []; | ||
} | ||
|
||
columns.push({ | ||
icon, | ||
xOffset, | ||
}); | ||
|
||
xOffset = xOffset + width + buffer; | ||
rowHeight = Math.max(rowHeight, height); | ||
} | ||
} | ||
|
||
if (columns.length > 0) { | ||
buildRowMapping(mapping, columns, yOffset); | ||
} | ||
|
||
const canvasHeight = nextPowOfTwo(rowHeight + yOffset + buffer); | ||
|
||
return { | ||
mapping, | ||
canvasHeight, | ||
}; | ||
} | ||
function buildRowMapping( | ||
mapping: IICONMap, | ||
columns: Array<{ | ||
icon: IIcon; | ||
xOffset: number; | ||
}>, | ||
yOffset: number, | ||
) { | ||
for (const column of columns) { | ||
const { icon, xOffset } = column; | ||
mapping[icon.id] = { ...icon, x: xOffset, y: yOffset, image: icon.image }; | ||
} | ||
} | ||
export function nextPowOfTwo(num: number) { | ||
return Math.pow(2, Math.ceil(Math.log2(num))); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.