summaryrefslogtreecommitdiff
path: root/public/assets/javascripts/rectangles/engine/map/draw.js
diff options
context:
space:
mode:
Diffstat (limited to 'public/assets/javascripts/rectangles/engine/map/draw.js')
-rw-r--r--public/assets/javascripts/rectangles/engine/map/draw.js183
1 files changed, 131 insertions, 52 deletions
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index 3e185d2..4f4759f 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -5,79 +5,129 @@ Map.Draw = function(map, opt){
var draw = this
- var ctx = map.canvas.getContext("2d")
+ var ctx = draw.ctx = map.canvas.getContext("2d")
draw.animate = function(){
ctx.save()
draw.clear()
- // draw.ruler()
+ draw.fill("rgba(255,255,255,0.98)")
- if (opt.minimap) {
+ if (opt.ortho) {
+ }
+ else if (opt.minimap) {
ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
ctx.scale( map.zoom, map.zoom )
+ if (map.opt.pivot) { ctx.rotate(scene.camera.rotationY + PI) }
ctx.translate( opt.center.x, - opt.center.z )
ctx.scale( -1, 1 )
draw.coords()
- draw.regions(Rooms.regions, [ "#fff" ])
+ if (Rooms.shapesMode) {
+ shapes.draw(draw.ctx, "#fff", null)
+ shapes.draw(draw.ctx, null, "#000")
+ }
+ else {
+ draw.regions(Rooms.regions, [ "#fff" ], "#000")
+ }
draw.camera(scene.camera)
}
-
else {
ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
ctx.scale( map.zoom, map.zoom )
ctx.translate( map.center.a, map.center.b )
ctx.scale( -1, 1 )
- draw.regions(Rooms.regions, [ "#f8f8f8" ])
+ draw.regions(Rooms.regions, [ "#f8f8f8" ], "#000")
draw.mouse(map.ui.mouse.cursor)
+ draw.mouse_dimensions(map.ui.mouse.cursor)
draw.coords()
scene && draw.camera(scene.camera)
}
ctx.restore()
}
+ draw.translate = function(){
+ ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
+ ctx.scale( map.zoom, map.zoom )
+ ctx.translate( map.center.a, map.center.b )
+ ctx.scale( -1, 1 )
+ }
+ // changes the ctx temporarily
draw.render = function(){
- ctx.save()
+ var thumbnail_width = 1000
+ var thumbnail_height = 750
+
+ var extent = Rooms.extent()
+ var center = extent.center()
+ var extent_width = extent.width()
+ var extent_height = extent.height()
+ var zoom
+ if (extent_width > extent_height) {
+ zoom = thumbnail_width / extent.width() * 0.9
+ }
+ else {
+ zoom = thumbnail_height / extent.height() * 0.9
+ }
+
+ var canvas = document.createElement("canvas")
+ canvas.width = thumbnail_width
+ canvas.height = thumbnail_height
+ ctx = canvas.getContext('2d')
+
draw.clear()
- ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
- ctx.scale( map.zoom, map.zoom )
- ctx.translate( map.center.a, map.center.b )
+ ctx.translate( thumbnail_width * 1/2, thumbnail_height * 1/2)
+ ctx.scale( zoom, zoom )
+ ctx.translate( center.a, -center.b )
ctx.scale( -1, 1 )
- draw.regions(Rooms.regions, ["#fff"])
- draw.mouse(map.ui.mouse.cursor)
- scene && draw.camera(scene.camera)
-
+ draw.regions(Rooms.regions, ["#fff"], null)
+
ctx.restore()
+
+ // invert opacity
+ var pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+ var pixels = pixelData.data
+ for (var i = 0, k, _len = pixels.length; i < _len; i++) {
+ k = i*4
+ if (pixels[k+3] == 0) {
+ pixels[k] = pixels[k+1] = pixels[k+2] = pixels[k+3] = 255
+ }
+ else {
+ pixels[k] = pixels[k+1] = pixels[k+2] = 255
+ pixels[k+3] = 0
+ }
+ }
+ ctx.putImageData(pixelData, 0, 0)
+
+ // reset the ctx
+ ctx = draw.ctx
+
+ return canvas
}
draw.clear = function(){
- ctx.fillStyle = "rgba(255,255,255,0.98)"
ctx.clearRect(0, 0, map.dimensions.a, map.dimensions.b)
- ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b)
}
- draw.ruler = function (){
- ctx.strokeStyle = "rgba(80,80,80,0.5)"
- ctx.lineWidth = 1
- var len = 5
- for (var i = 0.5; i < map.dimensions.a; i += 10) {
- line(i, 0, i, len)
- line(0, i, len, i)
- }
+ draw.fill = function(fillStyle){
+ ctx.fillStyle = fillStyle
+ ctx.fillRect(0, 0, map.dimensions.a, map.dimensions.b)
}
- draw.regions = function(regions, colors){
+ draw.regions = function(regions, colors, stroke){
+ if (stroke) {
+ ctx.strokeStyle = "#000"
+ ctx.lineWidth = (1 / map.zoom)
+ }
for (var i = 0; i < regions.length; i++) {
if (regions[i].dupe) continue
ctx.fillStyle = colors[i % colors.length]
- ctx.strokeStyle = "#000"
- ctx.lineWidth = (1 / map.zoom)
fill_region(regions[i])
- stroke_sides(regions[i])
+ if (stroke) {
+ stroke_sides(regions[i])
+ }
}
}
@@ -88,7 +138,8 @@ Map.Draw = function(map, opt){
ctx.beginPath();
ctx.arc(mouse.x.b, mouse.y.b, radius, 0, 2*Math.PI, false);
ctx.fill();
-
+ }
+ draw.mouse_dimensions = function(mouse){
if (mouse.width() != 0 && mouse.height() != 0) {
if (map.ui.dragging) {
stroke_rect(mouse)
@@ -124,36 +175,39 @@ Map.Draw = function(map, opt){
}
draw.coords = function(){
- /*
- ctx.fillStyle = "#888";
- dot_at(0,0)
- ctx.fillStyle = "#bbb";
- dot_at(100,0)
- dot_at(0,100)
- ctx.fillStyle = "#ddd";
- dot_at(200,0)
- dot_at(0,200)
- ctx.fillStyle = "#eee";
- dot_at(300,0)
- dot_at(0,300)
- */
-
ctx.strokeStyle = "rgba(0,0,0,0.1)"
ctx.lineWidth = 1/map.zoom
var sides = map.sides()
- var quant = sides.clone().quantize(200)
- for (var x = quant.x.a - 200; x <= quant.x.b; x += 200) {
- line(x, sides.y.a, x, sides.y.b)
- }
- for (var y = quant.y.a - 200; y <= quant.y.b; y += 200) {
- line(sides.x.a, y, sides.x.b, y)
+ var quant = sides.clone().quantize(draw.grid_size)
+ for (var x = quant.x.a - draw.grid_size; x <= quant.x.b; x += draw.grid_size) {
+ if (Math.round(x) % 360 == 0) {
+ ctx.strokeStyle = "rgba(0,0,0,0.3)"
+ ctx.lineWidth = 1/map.zoom
+ }
+ else {
+ ctx.strokeStyle = "rgba(0,0,0,0.05)"
+ ctx.lineWidth = 1/map.zoom
+ }
+ line(x, sides.y.a, x, sides.y.b)
}
+
+ for (var y = quant.y.a - draw.grid_size; y <= quant.y.b; y += draw.grid_size) {
+ if (Math.round(y) % 360 == 0) {
+ ctx.strokeStyle = "rgba(0,0,0,0.3)"
+ ctx.lineWidth = 1/map.zoom
+ }
+ else {
+ ctx.strokeStyle = "rgba(0,0,0,0.05)"
+ ctx.lineWidth = 1/map.zoom
+ }
+ line(sides.x.a, y, sides.x.b, y)
+ }
}
//
- function line (x,y,a,b,translation){
+ var line = draw.line = function (x,y,a,b,translation){
if (translation) {
x += translation.a
a += translation.a
@@ -184,11 +238,11 @@ Map.Draw = function(map, opt){
line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation)
}
- function dot_at (x,z){
+ draw.dot_at = function dot_at (x, z, radius){
ctx.save()
ctx.translate(x,z)
- var radius = 2 / map.zoom
+ radius = (radius || 2) / map.zoom
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI, false);
@@ -196,4 +250,29 @@ Map.Draw = function(map, opt){
ctx.restore()
}
+
+ draw.x_at = function x_at (x, z, length){
+ ctx.save()
+ if (x && 'x' in x) {
+ length = z
+ ctx.translate(x.x,x.z)
+ }
+ else {
+ ctx.translate(x,z)
+ }
+
+ var len = (length/2 || 4) / map.zoom
+
+ ctx.lineCap = "square"
+ ctx.lineWidth = 2/map.zoom
+ ctx.beginPath()
+ ctx.moveTo( -len, -len);
+ ctx.lineTo( len, len);
+ ctx.moveTo( -len, len);
+ ctx.lineTo( len, -len);
+ ctx.stroke();
+
+ ctx.restore()
+ }
+
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-15 03:33:37 +0000