add legend

This commit is contained in:
lxsang 2019-05-06 20:31:20 +02:00
parent ddba25df0c
commit 5e4aa7b1d4
2 changed files with 106 additions and 54 deletions

View File

@ -5,7 +5,9 @@
constructor(data) { constructor(data) {
this.target = data; this.target = data;
this.el = ($("<canvas>")).attr("class", "viewer")[0]; this.el = ($("<canvas>")).attr("class", "viewer")[0];
this.offset = 5; this.offset = 10;
this.points = [];
this.preprocess();
this.getBound(); this.getBound();
this.prepare(); this.prepare();
this.render(); this.render();
@ -15,6 +17,10 @@
return new paper.Point(v[0] / this.target.resolution + this.base.x, -v[1] / this.target.resolution + this.base.y); return new paper.Point(v[0] / this.target.resolution + this.base.x, -v[1] / this.target.resolution + this.base.y);
} }
preprocess() {
return this.points = this.target.data;
}
getBound() { getBound() {
var j, len, peak_rb, peak_tl, ref, start, v, x, y; var j, len, peak_rb, peak_tl, ref, start, v, x, y;
peak_tl = { peak_tl = {
@ -26,7 +32,7 @@
y: 0 y: 0
}; };
start = null; start = null;
ref = this.target.data; ref = this.points;
for (j = 0, len = ref.length; j < len; j++) { for (j = 0, len = ref.length; j < len; j++) {
v = ref[j]; v = ref[j];
x = v[0] / this.target.resolution; x = v[0] / this.target.resolution;
@ -63,13 +69,13 @@
} }
drawGrid(size, color) { drawGrid(size, color) {
var end, i, path, results, start, wgridsize; var end, i, path, start, text, wgridsize;
wgridsize = this.target.resolution * size; wgridsize = this.target.resolution * size;
// draw y line // draw y line
i = Math.ceil(this.bound[0].x / wgridsize); i = Math.ceil(this.bound[0].x / size);
while (i * wgridsize < this.bound[1].x) { while (i * size < this.bound[1].x) {
start = this.canvasPoint([i * wgridsize, this.bound[0].y]); start = new paper.Point(i * size + this.base.x, -this.bound[0].y + this.base.y);
end = this.canvasPoint([i * wgridsize, this.bound[1].y]); end = new paper.Point(i * size + this.base.x, -this.bound[1].y + this.base.y);
path = new paper.Path(); path = new paper.Path();
path.strokeColor = color; path.strokeColor = color;
path.moveTo(start); path.moveTo(start);
@ -78,18 +84,22 @@
} }
// draw x line // draw x line
i = Math.ceil(this.bound[0].y / wgridsize); i = Math.ceil(this.bound[0].y / size);
results = []; while (i * size < this.bound[1].y) {
while (i * wgridsize < this.bound[1].y) { start = new paper.Point(this.bound[0].x + this.base.x, -i * size + this.base.y);
start = this.canvasPoint([this.bound[0].x, i * wgridsize]); end = new paper.Point(this.bound[1].x + this.base.x, -i * size + this.base.y);
end = this.canvasPoint([this.bound[1].x, i * wgridsize]);
path = new paper.Path(); path = new paper.Path();
path.strokeColor = color; path.strokeColor = color;
path.moveTo(start); path.moveTo(start);
path.lineTo(end); path.lineTo(end);
results.push(i++); i++;
} }
return results;
// draw text
text = new paper.PointText(this.bound[0].x + this.base.x, this.base.y - this.bound[1].y + this.offset);
text.justification = 'left';
text.fillColor = '#494949';
return text.content = `Resolution: ${this.target.resolution}, grid size: ${wgridsize} mm`;
} }
drawAxis(color) { drawAxis(color) {
@ -97,15 +107,15 @@
// x axis // x axis
path = new paper.Path(); path = new paper.Path();
path.strokeColor = color; path.strokeColor = color;
start = this.canvasPoint([this.bound[0].x, 0]); start = new paper.Point(this.bound[0].x + this.base.x, this.base.y);
end = this.canvasPoint([this.bound[1].x, 0]); end = new paper.Point(this.bound[1].x + this.base.x, this.base.y);
path.moveTo(start); path.moveTo(start);
path.lineTo(end); path.lineTo(end);
// y axis // y axis
path = new paper.Path(); path = new paper.Path();
path.strokeColor = color; path.strokeColor = color;
start = this.canvasPoint([0, this.bound[0].y]); start = new paper.Point(this.base.x, -this.bound[0].y + this.base.y);
end = this.canvasPoint([0, this.bound[1].y]); end = new paper.Point(this.base.x, -this.bound[1].y + this.base.y);
path.moveTo(start); path.moveTo(start);
path.lineTo(end); path.lineTo(end);
return this.drawPoint([0, 0], color, 3); return this.drawPoint([0, 0], color, 3);
@ -141,26 +151,47 @@
super(data); super(data);
} }
p2c(length, angle) {
var rad;
rad = angle * Math.PI / 180;
return [length * Math.cos(rad), length * Math.sin(rad)];
}
preprocess() {
var i, j, len, ref, results, v;
if (this.target.coordinate !== "polar") {
return this.points = this.target.data;
}
this.point = [];
i = 0;
ref = this.target.data;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
v = ref[j];
this.points.push(this.p2c(v, this.target.start + i * this.target.angularResolution));
results.push(i = i + 1);
}
return results;
}
// point clound render // point clound render
render() { render() {
var j, len, path, point, ref, start, v; var end, j, len, path, ref, start, v;
this.drawGrid(20, "#DBDBDB"); // 20 px this.drawGrid(20, "#DBDBDB"); // 20 px
this.drawAxis("#0A84FF"); this.drawAxis("#0A84FF");
path = new paper.Path(); ref = this.points;
path.strokeColor = 'black';
start = null;
ref = this.target.data;
for (j = 0, len = ref.length; j < len; j++) { for (j = 0, len = ref.length; j < len; j++) {
v = ref[j]; v = ref[j];
point = this.canvasPoint(v); if (this.target.coordinate === "polar") {
if (!start) { path = new paper.Path();
start = point; path.strokeColor = '#c2a10e';
start = this.canvasPoint([0, 0]);
end = this.canvasPoint(v);
path.moveTo(start); path.moveTo(start);
} else { path.lineTo(end);
path.lineTo(point);
} }
this.drawPoint(v, "black", 4); this.drawPoint(v, "red", 3);
} }
return paper.view.draw(); return paper.view.draw();
} }

View File

@ -2,7 +2,9 @@ class DataViewer
constructor: (data) -> constructor: (data) ->
@target = data @target = data
@el = ($ "<canvas>").attr("class", "viewer")[0] @el = ($ "<canvas>").attr("class", "viewer")[0]
@offset = 5 @offset = 10
@points = []
@preprocess()
@getBound() @getBound()
@prepare() @prepare()
@render() @render()
@ -10,11 +12,14 @@ class DataViewer
canvasPoint: (v) -> canvasPoint: (v) ->
return new paper.Point(v[0] / @target.resolution + @base.x, - v[1] / @target.resolution + @base.y) return new paper.Point(v[0] / @target.resolution + @base.x, - v[1] / @target.resolution + @base.y)
preprocess: () ->
@points = @target.data
getBound: () -> getBound: () ->
peak_tl = { x:0, y:0} peak_tl = { x:0, y:0}
peak_rb = { x:0, y:0} peak_rb = { x:0, y:0}
start = null start = null
for v in @target.data for v in @points
x = v[0] / @target.resolution x = v[0] / @target.resolution
y = v[1] / @target.resolution y = v[1] / @target.resolution
peak_tl.x = x if x < peak_tl.x peak_tl.x = x if x < peak_tl.x
@ -37,10 +42,10 @@ class DataViewer
drawGrid: (size, color) -> drawGrid: (size, color) ->
wgridsize = @target.resolution*size wgridsize = @target.resolution*size
# draw y line # draw y line
i = Math.ceil(@bound[0].x / wgridsize) i = Math.ceil(@bound[0].x / size)
while i*wgridsize < @bound[1].x while i*size < @bound[1].x
start = @canvasPoint [i*wgridsize, @bound[0].y] start = new paper.Point(i*size + @base.x, -@bound[0].y + @base.y )
end = @canvasPoint [i*wgridsize, @bound[1].y] end = new paper.Point(i*size + @base.x, -@bound[1].y + @base.y )
path = new paper.Path() path = new paper.Path()
path.strokeColor = color path.strokeColor = color
path.moveTo start path.moveTo start
@ -48,29 +53,35 @@ class DataViewer
i++ i++
# draw x line # draw x line
i = Math.ceil(@bound[0].y / wgridsize) i = Math.ceil(@bound[0].y / size)
while i*wgridsize < @bound[1].y while i*size < @bound[1].y
start = @canvasPoint [@bound[0].x,i*wgridsize] start = new paper.Point(@bound[0].x + @base.x,-i*size + @base.y )
end = @canvasPoint [@bound[1].x, i*wgridsize] end = new paper.Point(@bound[1].x + @base.x, -i*size + @base.y )
path = new paper.Path() path = new paper.Path()
path.strokeColor = color path.strokeColor = color
path.moveTo start path.moveTo start
path.lineTo end path.lineTo end
i++ i++
# draw text
text = new paper.PointText(@bound[0].x + @base.x, @base.y - @bound[1].y + @offset)
text.justification = 'left'
text.fillColor = '#494949'
text.content = "Resolution: #{@target.resolution}, grid size: #{wgridsize} mm"
drawAxis: (color) -> drawAxis: (color) ->
# x axis # x axis
path = new paper.Path() path = new paper.Path()
path.strokeColor = color path.strokeColor = color
start = @canvasPoint [@bound[0].x, 0] start = new paper.Point( @bound[0].x + @base.x, @base.y)
end = @canvasPoint [@bound[1].x, 0] end = new paper.Point( @bound[1].x + @base.x, @base.y)
path.moveTo(start) path.moveTo(start)
path.lineTo(end) path.lineTo(end)
# y axis # y axis
path = new paper.Path() path = new paper.Path()
path.strokeColor = color path.strokeColor = color
start = @canvasPoint [0, @bound[0].y] start = new paper.Point(@base.x, -@bound[0].y + @base.y)
end = @canvasPoint [0, @bound[1].y] end = new paper.Point(@base.x, -@bound[1].y + @base.y)
path.moveTo(start) path.moveTo(start)
path.lineTo(end) path.lineTo(end)
@drawPoint [0,0], color, 3 @drawPoint [0,0], color, 3
@ -100,21 +111,31 @@ class PointCloudViewer extends DataViewer
constructor: (data) -> constructor: (data) ->
super data super data
p2c: (length, angle) ->
rad = angle*Math.PI / 180
return [length*Math.cos(rad), length*Math.sin(rad)]
preprocess: () ->
return @points = @target.data unless @target.coordinate is "polar"
@point = []
i = 0
for v in @target.data
@points.push @p2c v, @target.start + i*@target.angularResolution
i = i+1
# point clound render # point clound render
render: () -> render: () ->
@drawGrid 20, "#DBDBDB" # 20 px @drawGrid 20, "#DBDBDB" # 20 px
@drawAxis("#0A84FF") @drawAxis("#0A84FF")
for v in @points
if @target.coordinate is "polar"
path = new paper.Path() path = new paper.Path()
path.strokeColor = 'black' path.strokeColor = '#c2a10e'
start = null start = @canvasPoint [0,0]
for v in @target.data end = @canvasPoint v
point = @canvasPoint v path.moveTo start
if not start path.lineTo end
start = point @drawPoint v, "red", 3
path.moveTo(start)
else
path.lineTo point
@drawPoint v, "black", 4
paper.view.draw() paper.view.draw()