Viewer.prototype.drawPolygon = function(shape, options) {
var lw = options.lineWidth;
var ratio = options.ratio;
var vertices = shape.m_vertices;
if (!vertices.length) {
return;
}
var minX = Infinity, minY = Infinity;
var maxX = -Infinity, maxY = -Infinity;
for (var i = 0; i < vertices.length; ++i) {
var v = vertices[i];
minX = Math.min(minX, v.x);
maxX = Math.max(maxX, v.x);
minY = Math.min(minY, v.y);
maxY = Math.max(maxY, v.y);
}
var width = maxX - minX;
var height = maxY - minY;
var texture = Stage.canvas(function(ctx) {
this.size(width + 2 * lw, height + 2 * lw, ratio);
ctx.scale(ratio, ratio);
ctx.beginPath();
for (var i = 0; i < vertices.length; ++i) {
var v = vertices[i];
var x = v.x - minX + lw;
var y = v.y - minY + lw;
if (i == 0)
ctx.moveTo(x, y);
else
ctx.lineTo(x, y);
}
if (vertices.length > 2) {
ctx.closePath();
}
if (options.fillStyle) {
ctx.fillStyle = options.fillStyle;
ctx.fill();
ctx.closePath();
}
ctx.lineCap = 'round';
ctx.lineWidth = options.lineWidth;
ctx.strokeStyle = options.strokeStyle;
ctx.stroke();
});
var image = Stage.image(texture);
image.offset(minX - lw, minY - lw);
var node = Stage.create().append(image);
return node;
};
Viewer.prototype.drawCircle = function(shape, options) {
var lw = options.lineWidth;
var ratio = options.ratio;
var r = shape.m_radius;
var cx = r + lw;
var cy = r + lw;
var w = r * 2 + lw * 2;
var h = r * 2 + lw * 2;
var texture = Stage.canvas(function(ctx) {
this.size(w, h, ratio);
ctx.scale(ratio, ratio);
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
if (options.fillStyle) {
ctx.fillStyle = options.fillStyle;
ctx.fill();
}
ctx.lineTo(cx, cy);
ctx.lineWidth = options.lineWidth;
ctx.strokeStyle = options.strokeStyle;
ctx.stroke();
});
var image = Stage.image(texture)
.offset(shape.m_p.x - cx, shape.m_p.y - cy);
var node = Stage.create().append(image);
return node;
};
Viewer.prototype.drawEdge = function(edge, options) {
var lw = options.lineWidth;
var ratio = options.ratio;
var v1 = edge.m_vertex1;
var v2 = edge.m_vertex2;
var dx = v2.x - v1.x;
var dy = v2.y - v1.y;
var length = Math.sqrt(dx * dx + dy * dy);
var texture = Stage.canvas(function(ctx) {
this.size(length + 2 * lw, 2 * lw, ratio);
ctx.scale(ratio, ratio);
ctx.beginPath();
ctx.moveTo(lw, lw);
ctx.lineTo(lw + length, lw);
ctx.lineCap = 'round';
ctx.lineWidth = options.lineWidth;
ctx.strokeStyle = options.strokeStyle;
ctx.stroke();
});
var minX = Math.min(v1.x, v2.x);
var minY = Math.min(v1.y, v2.y);
var image = Stage.image(texture);
image.rotate(Math.atan2(dy, dx));
image.offset(minX - lw, minY - lw);
var node = Stage.create().append(image);
return node;
};
Viewer.prototype.drawJoint = function(joint, options) {
var lw = options.lineWidth;
var ratio = options.ratio;
var length = 10;
var texture = Stage.canvas(function(ctx) {
this.size(length + 2 * lw, 2 * lw, ratio);
ctx.scale(ratio, ratio);
ctx.beginPath();
ctx.moveTo(lw, lw);
ctx.lineTo(lw + length, lw);
ctx.lineCap = 'round';
ctx.lineWidth = options.lineWidth;
ctx.strokeStyle = options.strokeStyle;
ctx.stroke();
});
var image = Stage.image(texture).stretch();
return image;
};
(function() {
var drawingTexture = new Stage.Texture();
stage.append(Stage.image(drawingTexture));
var buffer = [];
stage.tick(function() {
buffer.length = 0;
}, true);
drawingTexture.draw = function(ctx) {
ctx.save();
ctx.transform(1, 0, 0, -1, -testbed.x, -testbed.y);
ctx.lineWidth = 2 / testbed.ratio;
ctx.lineCap = 'round';
for (var drawing = buffer.shift(); drawing; drawing = buffer.shift()) {
drawing(ctx, testbed.ratio);
}
ctx.restore();
};
testbed.drawPoint = function(p, r, color) {
buffer.push(function (ctx, ratio) {
ctx.beginPath();
ctx.arc(p.x, p.y, 5 / ratio, 0, 2 * Math.PI);
ctx.strokeStyle = color;
ctx.stroke();
});
drawHash += "point" + p.x + ',' + p.y + ',' + r + ',' + color;
};
testbed.drawCircle = function(p, r, color) {
buffer.push(function (ctx) {
ctx.beginPath();
ctx.arc(p.x, p.y, r, 0, 2 * Math.PI);
ctx.strokeStyle = color;
ctx.stroke();
});
drawHash += "circle" + p.x + ',' + p.y + ',' + r + ',' + color;
};
testbed.drawSegment = function(a, b, color) {
buffer.push(function (ctx) {
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
ctx.strokeStyle = color;
ctx.stroke();
});
drawHash += "segment" + a.x + ',' + a.y + ',' + b.x + ',' + b.y + ',' + color;
};
testbed.drawPolygon = function(points, color) {
if (!points || !points.length) {
return;
}
buffer.push(function (ctx) {
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (var i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
ctx.strokeStyle = color;
ctx.closePath();
ctx.stroke();
});
drawHash += "segment";
for (var i = 1; i < points.length; i++) {
drawHash += points[i].x + ',' + points[i].y + ',';
}
drawHash += color;
};
testbed.drawAABB = function(aabb, color) {
buffer.push(function (ctx) {
ctx.beginPath();
ctx.moveTo(aabb.lowerBound.x, aabb.lowerBound.y);
ctx.lineTo(aabb.upperBound.x, aabb.lowerBound.y);
ctx.lineTo(aabb.upperBound.x, aabb.upperBound.y);
ctx.lineTo(aabb.lowerBound.x, aabb.upperBound.y);
ctx.strokeStyle = color;
ctx.closePath();
ctx.stroke();
});
drawHash += "aabb";
drawHash += aabb.lowerBound.x + ',' + aabb.lowerBound.y + ',';
drawHash += aabb.upperBound.x + ',' + aabb.upperBound.y + ',';
drawHash += color;
};
testbed.color = function(r, g, b) {
r = r * 256 | 0;
g = g * 256 | 0;
b = b * 256 | 0;
return 'rgb(' + r + ', ' + g + ', ' + b + ')'
};
})();