|
@@ -147,13 +147,17 @@
|
|
canvas.height = screenH;
|
|
canvas.height = screenH;
|
|
context = canvas.getContext('2d');
|
|
context = canvas.getContext('2d');
|
|
|
|
|
|
- const drawTriangle = (a, b, c) => {
|
|
|
|
|
|
+ const drawTriangle = (a, b, c, center) => {
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
|
const path = new Path2D();
|
|
const path = new Path2D();
|
|
|
|
+ /*
|
|
path.moveTo(Math.round(a.x), Math.round(a.y));
|
|
path.moveTo(Math.round(a.x), Math.round(a.y));
|
|
path.lineTo(Math.round(b.x), Math.round(b.y));
|
|
path.lineTo(Math.round(b.x), Math.round(b.y));
|
|
path.lineTo(Math.round(c.x), Math.round(c.y));
|
|
path.lineTo(Math.round(c.x), Math.round(c.y));
|
|
- context.fill(path);
|
|
|
|
|
|
+ */
|
|
|
|
+ path.moveTo(Math.round(center.x), Math.round(center.y));
|
|
|
|
+ path.lineTo(Math.round(a.x), Math.round(a.y));
|
|
|
|
+ context.stroke(path);
|
|
};
|
|
};
|
|
const client = new Tuio.Client({
|
|
const client = new Tuio.Client({
|
|
host: `http://localhost:${config.app.httpPort}`
|
|
host: `http://localhost:${config.app.httpPort}`
|
|
@@ -230,13 +234,13 @@
|
|
const apexAngle = 35;
|
|
const apexAngle = 35;
|
|
const mediatrice = 300;
|
|
const mediatrice = 300;
|
|
|
|
|
|
- if (config.app.debugDisplay) {
|
|
|
|
- const x = updateObject.xPos;
|
|
|
|
- const y = updateObject.yPos;
|
|
|
|
|
|
+ const convertedAngle = updateObject.angle < 0 ? 180 + updateObject.angle : updateObject.angle + 180;
|
|
|
|
|
|
|
|
+ console.log(updateObject.angle, convertedAngle);
|
|
|
|
+ if (config.app.debugDisplay) {
|
|
const apex = {
|
|
const apex = {
|
|
- x: Math.cos(updateObject.angle * Math.PI / 180) * (mediatrice / 2) + x,
|
|
|
|
- y: Math.sin(updateObject.angle * Math.PI / 180) * (mediatrice / 2) + y
|
|
|
|
|
|
+ x: Math.cos(updateObject.angle * Math.PI / 180) * (mediatrice / 2) + updateObject.xPos,
|
|
|
|
+ y: Math.sin(updateObject.angle * Math.PI / 180) * (mediatrice / 2) + updateObject.yPos
|
|
};
|
|
};
|
|
const b = {
|
|
const b = {
|
|
x: Math.cos((apexAngle / 2) * Math.PI / 180) * (mediatrice / 2) + apex.x,
|
|
x: Math.cos((apexAngle / 2) * Math.PI / 180) * (mediatrice / 2) + apex.x,
|
|
@@ -246,7 +250,10 @@
|
|
x: Math.cos((-1 * apexAngle / 2) * Math.PI / 180) * (mediatrice / 2) + apex.x,
|
|
x: Math.cos((-1 * apexAngle / 2) * Math.PI / 180) * (mediatrice / 2) + apex.x,
|
|
y: Math.sin((-1 * apexAngle / 2) * Math.PI / 180) * (mediatrice / 2) + apex.y
|
|
y: Math.sin((-1 * apexAngle / 2) * Math.PI / 180) * (mediatrice / 2) + apex.y
|
|
};
|
|
};
|
|
- drawTriangle(apex, b, c);
|
|
|
|
|
|
+ drawTriangle(apex, b, c, {
|
|
|
|
+ x: updateObject.xPos,
|
|
|
|
+ y: updateObject.yPos
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
|
|
if (config.app.debug && config.app.debugLog.frontend.receiver.onUpdateTuioObject) {
|
|
if (config.app.debug && config.app.debugLog.frontend.receiver.onUpdateTuioObject) {
|