mirror of
https://github.com/antos-rde/antosdk-apps.git
synced 2024-11-07 22:18:29 +01:00
add grid
This commit is contained in:
parent
89495d96a6
commit
ddba25df0c
@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
getBound() {
|
||||
var i, len, peak_rb, peak_tl, ref, start, v, x, y;
|
||||
var j, len, peak_rb, peak_tl, ref, start, v, x, y;
|
||||
peak_tl = {
|
||||
x: 0,
|
||||
y: 0
|
||||
@ -27,8 +27,8 @@
|
||||
};
|
||||
start = null;
|
||||
ref = this.target.data;
|
||||
for (i = 0, len = ref.length; i < len; i++) {
|
||||
v = ref[i];
|
||||
for (j = 0, len = ref.length; j < len; j++) {
|
||||
v = ref[j];
|
||||
x = v[0] / this.target.resolution;
|
||||
y = v[1] / this.target.resolution;
|
||||
if (x < peak_tl.x) {
|
||||
@ -53,30 +53,84 @@
|
||||
return this.height = peak_rb.y - peak_tl.y + 2 * this.offset;
|
||||
}
|
||||
|
||||
prepare() {
|
||||
var ctx, end, path, start;
|
||||
ctx = this.el.getContext("2d");
|
||||
ctx.translate(this.base.x, this.base.y);
|
||||
ctx.canvas.width = this.width;
|
||||
ctx.canvas.height = this.height;
|
||||
paper.setup(this.el);
|
||||
// draw the base
|
||||
drawPoint(v, color, size) {
|
||||
// center
|
||||
return new paper.Path.Circle({
|
||||
center: this.canvasPoint(v),
|
||||
radius: size,
|
||||
fillColor: color
|
||||
});
|
||||
}
|
||||
|
||||
drawGrid(size, color) {
|
||||
var end, i, path, results, start, wgridsize;
|
||||
wgridsize = this.target.resolution * size;
|
||||
// draw y line
|
||||
i = Math.ceil(this.bound[0].x / wgridsize);
|
||||
while (i * wgridsize < this.bound[1].x) {
|
||||
start = this.canvasPoint([i * wgridsize, this.bound[0].y]);
|
||||
end = this.canvasPoint([i * wgridsize, this.bound[1].y]);
|
||||
path = new paper.Path();
|
||||
path.strokeColor = color;
|
||||
path.moveTo(start);
|
||||
path.lineTo(end);
|
||||
i++;
|
||||
}
|
||||
|
||||
// draw x line
|
||||
i = Math.ceil(this.bound[0].y / wgridsize);
|
||||
results = [];
|
||||
while (i * wgridsize < this.bound[1].y) {
|
||||
start = this.canvasPoint([this.bound[0].x, i * wgridsize]);
|
||||
end = this.canvasPoint([this.bound[1].x, i * wgridsize]);
|
||||
path = new paper.Path();
|
||||
path.strokeColor = color;
|
||||
path.moveTo(start);
|
||||
path.lineTo(end);
|
||||
results.push(i++);
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
drawAxis(color) {
|
||||
var end, path, start;
|
||||
// x axis
|
||||
path = new paper.Path();
|
||||
path.strokeColor = '#BBBBBB';
|
||||
path.strokeColor = color;
|
||||
start = this.canvasPoint([this.bound[0].x, 0]);
|
||||
end = this.canvasPoint([this.bound[1].x, 0]);
|
||||
path.moveTo(start);
|
||||
path.lineTo(end);
|
||||
// y axis
|
||||
path = new paper.Path();
|
||||
path.strokeColor = '#BBBBBB';
|
||||
path.strokeColor = color;
|
||||
start = this.canvasPoint([0, this.bound[0].y]);
|
||||
end = this.canvasPoint([0, this.bound[1].y]);
|
||||
path.moveTo(start);
|
||||
return path.lineTo(end);
|
||||
path.lineTo(end);
|
||||
return this.drawPoint([0, 0], color, 3);
|
||||
}
|
||||
|
||||
prepare() {
|
||||
var ctx;
|
||||
ctx = this.el.getContext("2d");
|
||||
ctx.translate(this.base.x, this.base.y);
|
||||
ctx.canvas.width = this.width;
|
||||
ctx.canvas.height = this.height;
|
||||
return paper.setup(this.el);
|
||||
}
|
||||
|
||||
//tool = new paper.Tool()
|
||||
//hitOptions = {
|
||||
// segments: true,
|
||||
// stroke: true,
|
||||
// fill: true,
|
||||
// tolerance: 5
|
||||
//}
|
||||
//tool.onMouseMove = (event) ->
|
||||
// hitResult = paper.project.hitTest event.point, hitOptions
|
||||
// return unless hitResult
|
||||
// console.log hitResult
|
||||
render() {}
|
||||
|
||||
};
|
||||
@ -90,13 +144,15 @@
|
||||
|
||||
// point clound render
|
||||
render() {
|
||||
var i, len, path, point, ref, start, v;
|
||||
var j, len, path, point, ref, start, v;
|
||||
this.drawGrid(20, "#DBDBDB"); // 20 px
|
||||
this.drawAxis("#0A84FF");
|
||||
path = new paper.Path();
|
||||
path.strokeColor = 'black';
|
||||
start = null;
|
||||
ref = this.target.data;
|
||||
for (i = 0, len = ref.length; i < len; i++) {
|
||||
v = ref[i];
|
||||
for (j = 0, len = ref.length; j < len; j++) {
|
||||
v = ref[j];
|
||||
point = this.canvasPoint(v);
|
||||
if (!start) {
|
||||
start = point;
|
||||
@ -104,6 +160,7 @@
|
||||
} else {
|
||||
path.lineTo(point);
|
||||
}
|
||||
this.drawPoint(v, "black", 4);
|
||||
}
|
||||
return paper.view.draw();
|
||||
}
|
||||
|
@ -26,28 +26,73 @@ class DataViewer
|
||||
@base = {x: 0 - @bound[0].x+ @offset, y: @bound[1].y + @offset}
|
||||
@width = peak_rb.x - peak_tl.x + 2*@offset
|
||||
@height = peak_rb.y - peak_tl.y + 2*@offset
|
||||
prepare: () ->
|
||||
ctx = @el.getContext "2d"
|
||||
ctx.translate(@base.x, @base.y)
|
||||
ctx.canvas.width = @width
|
||||
ctx.canvas.height = @height
|
||||
paper.setup @el
|
||||
# draw the base
|
||||
# x axis
|
||||
|
||||
drawPoint: (v, color, size) ->
|
||||
# center
|
||||
new paper.Path.Circle {
|
||||
center: @canvasPoint(v),
|
||||
radius: size,
|
||||
fillColor: color
|
||||
}
|
||||
drawGrid: (size, color) ->
|
||||
wgridsize = @target.resolution*size
|
||||
# draw y line
|
||||
i = Math.ceil(@bound[0].x / wgridsize)
|
||||
while i*wgridsize < @bound[1].x
|
||||
start = @canvasPoint [i*wgridsize, @bound[0].y]
|
||||
end = @canvasPoint [i*wgridsize, @bound[1].y]
|
||||
path = new paper.Path()
|
||||
path.strokeColor = color
|
||||
path.moveTo start
|
||||
path.lineTo end
|
||||
i++
|
||||
|
||||
# draw x line
|
||||
i = Math.ceil(@bound[0].y / wgridsize)
|
||||
while i*wgridsize < @bound[1].y
|
||||
start = @canvasPoint [@bound[0].x,i*wgridsize]
|
||||
end = @canvasPoint [@bound[1].x, i*wgridsize]
|
||||
path = new paper.Path()
|
||||
path.strokeColor = color
|
||||
path.moveTo start
|
||||
path.lineTo end
|
||||
i++
|
||||
|
||||
drawAxis: (color) ->
|
||||
# x axis
|
||||
path = new paper.Path()
|
||||
path.strokeColor = '#BBBBBB'
|
||||
path.strokeColor = color
|
||||
start = @canvasPoint [@bound[0].x, 0]
|
||||
end = @canvasPoint [@bound[1].x, 0]
|
||||
path.moveTo(start)
|
||||
path.lineTo(end)
|
||||
# y axis
|
||||
path = new paper.Path()
|
||||
path.strokeColor = '#BBBBBB'
|
||||
path.strokeColor = color
|
||||
start = @canvasPoint [0, @bound[0].y]
|
||||
end = @canvasPoint [0, @bound[1].y]
|
||||
path.moveTo(start)
|
||||
path.lineTo(end)
|
||||
@drawPoint [0,0], color, 3
|
||||
|
||||
prepare: () ->
|
||||
ctx = @el.getContext "2d"
|
||||
ctx.translate @base.x, @base.y
|
||||
ctx.canvas.width = @width
|
||||
ctx.canvas.height = @height
|
||||
paper.setup @el
|
||||
#tool = new paper.Tool()
|
||||
#hitOptions = {
|
||||
# segments: true,
|
||||
# stroke: true,
|
||||
# fill: true,
|
||||
# tolerance: 5
|
||||
#}
|
||||
#tool.onMouseMove = (event) ->
|
||||
# hitResult = paper.project.hitTest event.point, hitOptions
|
||||
# return unless hitResult
|
||||
# console.log hitResult
|
||||
|
||||
render:() ->
|
||||
# sub class responsibility
|
||||
|
||||
@ -57,6 +102,8 @@ class PointCloudViewer extends DataViewer
|
||||
|
||||
# point clound render
|
||||
render: () ->
|
||||
@drawGrid 20, "#DBDBDB" # 20 px
|
||||
@drawAxis("#0A84FF")
|
||||
path = new paper.Path()
|
||||
path.strokeColor = 'black'
|
||||
start = null
|
||||
@ -67,6 +114,7 @@ class PointCloudViewer extends DataViewer
|
||||
path.moveTo(start)
|
||||
else
|
||||
path.lineTo point
|
||||
@drawPoint v, "black", 4
|
||||
paper.view.draw()
|
||||
|
||||
|
||||
|
@ -1 +1 @@
|
||||
{"name":"LuaPlayground","root":"home://workspace/LuaPlayground","css":["css/main.css"],"javascripts":[],"coffees":["coffees/main.coffee"],"copies":["assets/scheme.html","package.json","README.md"]}
|
||||
{"name":"LuaPlayground","root":"home://myws/antosdk-apps/LuaPlayground","css":["css/main.css"],"javascripts":["javascripts/paper-core.min.js"],"coffees":["coffees/main.coffee"],"copies":["assets/scheme.html","package.json","README.md"]}
|
Loading…
Reference in New Issue
Block a user