You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.9 KiB
67 lines
1.9 KiB
2 years ago
|
class MiniMap{
|
||
|
|
|
||
|
|
constructor(htmlHolder, htmlCanvas, isMinimap){
|
||
|
|
let w = $(htmlHolder).width();
|
||
|
|
let h = $(htmlHolder).height();
|
||
|
|
this.dim = {x: w, y: h};
|
||
|
|
this.p = p.createGraphics(w, h);
|
||
|
|
this.p.parent(htmlHolder.get(0));
|
||
|
|
this.isMinimap = isMinimap;
|
||
|
|
$(htmlCanvas).show();
|
||
|
|
}
|
||
|
|
|
||
|
|
get mouseX(){
|
||
|
|
return p.winMouseX - $("#minimap > canvas").offset().left;
|
||
|
|
}
|
||
|
|
|
||
|
|
get mouseY(){
|
||
|
|
return p.winMouseY - $("#minimap > canvas").offset().top;
|
||
|
|
}
|
||
|
|
|
||
|
|
draw(image, dim, vp){
|
||
|
|
this.p.clear();
|
||
|
|
|
||
|
|
this.p.image(image, 0, 0, this.dim.x, this.dim.y, 0, 0, dim.x, dim.y);
|
||
|
|
|
||
|
|
if (this.isMinimap){
|
||
|
|
let x = p.map(vp.x, 0, vp.maxX, 0, this.dim.x);
|
||
|
|
let y = p.map(vp.y, 0, vp.maxY, 0, this.dim.y);
|
||
|
|
let w = p.map(p.width * vp.zoom, 0, vp.maxX, 0, this.dim.x);
|
||
|
|
let h = p.map(p.height * vp.zoom, 0, vp.maxY, 0, this.dim.y);
|
||
|
|
let r = (w + h) / 2 * 0.02;
|
||
|
|
this.p.noFill();
|
||
|
|
this.p.rect(x, y, w, h, r);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMouseDown(){
|
||
|
|
if (this.mouseX > 0 && this.mouseX < this.p.width &&
|
||
|
|
this.mouseY > 0 && this.mouseY < this.p.height){
|
||
|
|
this.isDrawing = true;
|
||
|
|
this.moveViewport();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMouseUp(){
|
||
|
|
this.isDrawing = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
onMouseDragged(){
|
||
|
|
if (this.isDrawing)
|
||
|
|
this.moveViewport();
|
||
|
|
}
|
||
|
|
|
||
|
|
moveViewport(){
|
||
|
|
if (!this.isMinimap)
|
||
|
|
return;
|
||
|
|
|
||
|
|
let vp = drawer.viewport;
|
||
|
|
let mapX = this.mouseX - p.map(p.width * vp.zoom / 2, 0, drawer.dim.x, 0, this.dim.x);
|
||
|
|
let mapY = this.mouseY - p.map(p.height * vp.zoom / 2, 0, drawer.dim.y, 0, this.dim.y);
|
||
|
|
let x = p.map(mapX, 0, this.dim.x, 0, vp.maxX);
|
||
|
|
let y = p.map(mapY, 0, this.dim.y, 0, vp.maxY);
|
||
|
|
drawer.viewport.x = x;
|
||
|
|
drawer.viewport.y = y;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|