BBox

by johnoscott

HTML

<script src="https://cdn.rawgit.com/svgdotjs/svg.js/master/dist/svg.min.js"></script>
<div id="drawing"></div>
<button onclick="redraw();">
Reload
</button>
<button onclick="clearCanvas();">
Clear
</button>

CSS

#drawing {
  border: 1px solid gray;
  background-color: lightgray;
}

svg {
  border: 1px dotted red;
  background-color: white;
}

.box {
  fill: none;
  stroke-width: 1;
  stroke: green;
}

.building {
  fill: lightblue;
  stroke-width: 1;
  stroke: blue;
}

.building0 {
  fill: pink;
  stroke-width: 1;
  stroke: red;
}

.building1 {
  fill: lightgreen;
  stroke-width: 1;
  stroke: green;
}

.building2 {
  fill: orange;
  stroke-width: 1;
  stroke: orange;
}

.building3 {
  fill: lightyellow;
  stroke-width: 1;
  stroke: yellow;
}

.horizon {
    stroke-width: 1;
    stroke: gray;
    fill: none;
}

.bounds {
    stroke-width: 1;
    stroke: blue;
    fill: none;
}

.skyline {
    stroke-width: 3;
    stroke: black;
    fill: none;
}

JavaScript

var draw;

  var originX = 130;
  var originy = 10;
  
  const x =0, y=1;


var buildings = [

	[0,100,50],
  [50,200,100],
	[100,300,80]
];

var skyline = [
	[50,20],
  [110,80],
	[170,50],
	[200,20],
	[220,0],
	[250,80],
  [250,0],
];

function drawAll() {

  draw = SVG('drawing').size(300,158);
  
  drawBuildings();
  drawSkyline();

}

function toAxis(node) {
  node.flip('y',0);
  node.move(originy,-originX);
}


function drawSkyline() {

  // draw transformed rect
  // var rect = 	  draw.rect(175,175).move(75,75).rotate(20).scale(1, 0.5)

  // draw bbox
  // var b = rect.bbox()
  //draw.rect(b.width, b.height).addClass('box').move(b.x, b.y)
  
  var skyPoints = [];
  var prev=[0,skyline[0][y]];
  skyline.map((pt, i) => {
    skyPoints.push(prev[x],pt[y]);
    skyPoints.push(pt);
    prev = pt;
  });
  
 
   var sky = draw.group();
   sky.polyline(skyPoints).addClass('skyline');
  // buildings.rect(300,300).addClass('building4').move(0,0);
	// sky.polyline([[0,30], [20,30], [20,80], [80,80], [80,40]]).addClass('skyline');
  // group.flip('y').move(10,150);
	toAxis(sky);  
 
}




function drawBuildings() {

  // draw transformed rect
  // var rect = 	  draw.rect(175,175).move(75,75).rotate(20).scale(1, 0.5)

  // draw bbox
  // var b = rect.bbox()
  //draw.rect(b.width, b.height).addClass('box').move(b.x, b.y)
  
  
 
   var buildings = draw.group();
  // buildings.rect(300,300).addClass('building4').move(0,0);

  buildings.rect(200,20).addClass('building').move(0, 0);
  buildings.rect(60,80).addClass('building0').move(50, 0);
  buildings.rect(100,50).addClass('building1').move(70, 0);
  buildings.rect(30,80).addClass('building2').move(220, 0);
  //buildings.flip('y').move(10,150);
	toAxis(buildings);  
  
  var nested = draw.nested();
  
  // origin line
  nested.rect(300,100).addClass('bounds').move(0, 0);
  nested.line(0,0,300,0).addClass('horizon');
  nested.line(0,0,-10,0).addClass('horizon');
  nested.line(0,0,0,100).addClass('horizon');
 ...