胡斌 / liveAssistant_web_demo

转到一个项目
Toggle navigation Toggle navigation pinning
胡斌
0261c151 1 parent cf586ce7

use linedda to interpolate point and pressure

内嵌 并排对比
正在显示 1 个修改的文件 包含 113 行增加 和 140 行删除
... ... @@ -372,12 +372,8 @@
var last_ext_press = 0;
/*
function draw_ext_input(px,py,press) {
//x = canvas_width - px * ratio_x;
//y = canvas_height - py * ratio_y;
x = px * ratio_x;
y = py * ratio_y;
if(last_ext_press == 0 && press != 0){
ctx.beginPath();
... ... @@ -385,16 +381,14 @@
last_ext_press = 1;
}
else if(press != 0) {
var line_width = (kWIDTH_MAX - kWIDTH_MIN)/pressure_level * p + kWIDTH_MIN;
ctx.lineTo(x, y);
ctx.stroke();
}
last_ext_press = press;
}*/
function draw_ext_input(px,py,press) {
//x = canvas_width - px * ratio_x;
//y = canvas_height - py * ratio_y;
function draw_ext_input(px, py, press) {
var x = px * ratio_x;
var y = py * ratio_y;
... ... @@ -410,32 +404,20 @@
last_ext_press = press;
}
function Point(x , y, time) {
function Point(x , y, p) {
this.x = x;
this.y = y;
this.time = time;
this.p = p;
}
var previousPoint, startPoint, currentPoint;
var MIN_PEN_SIZE = 1.0;
var MIN_INCREMENT = 0.01;
var INCREMENT_CONSTANT = 0.0005;
var DRAWING_CONSTANT = 0.0085;
var MAX_VELOCITY_BOUND = 15;
var MIN_VELOCITY_BOUND = 1.6;
var STROKE_DES_VELOCITY = 1.0;
var VELOCITY_FILTER_WEIGHT = 0.2;
var lastVelocity, lastWidth;
//------begin
var P_LOW = 200;
var P_MIDDLE = 500;
var P_HIGN = 800;
//var kWIDTH_MIN = 1.0;
var kWIDTH_MIN = 1.0;
var previousPoint, currentPoint;
var kWIDTH_MIN = 0.2;
var kWIDTH_MAX = 3.0;
//current width
var strokeWidth = 3.0;
var rotate_degree = 0;
var pressure_level = 2048.0;
function setStrokeWidth(strokeWidth) {
... ... @@ -444,137 +426,89 @@
kWIDTH_MIN = strokeWidth / 3;
}
function changeWidth(P) {
if (P > P_LOW && P < P_MIDDLE) {
strokeWidth -= 0.01;
if (strokeWidth < kWIDTH_MIN) {
strokeWidth = kWIDTH_MIN;
}
} else if (P >= P_MIDDLE && P < P_HIGN) {
strokeWidth += 0.005;
if (strokeWidth > kWIDTH_MAX) {
strokeWidth = kWIDTH_MAX;
function draw_line(pt) {
var x = previousPoint.x;
var y = previousPoint.y;
var p = previousPoint.p;
var stepx, stepy ,stepp;
var times = 1;
var dy = pt.y - previousPoint.y;
var dx = pt.x - previousPoint.x;
var dp = pt.p - previousPoint.p;
var abs_dy = Math.abs(dy);
var abs_dx = Math.abs(dx);
if(abs_dy < 1 && abs_dx <1) {
if(pt.p > p) {
p = pt.p;
}
} else if (P >= P_HIGN) {
strokeWidth += 0.01;
if (strokeWidth > kWIDTH_MAX) {
strokeWidth = kWIDTH_MAX;
}
} else {
strokeWidth -= 0.003;
if (strokeWidth < kWIDTH_MIN) {
strokeWidth = kWIDTH_MIN;
}
var line_width = (kWIDTH_MAX - kWIDTH_MIN)/pressure_level * p + kWIDTH_MIN;
ctx.beginPath(); //Start path
ctx.arc(x, y, line_width, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure.
ctx.fill();
return;
}
if (abs_dy >= abs_dx) {
times += abs_dy;
stepx = dx * 1.0 / abs_dy;
stepy = 1.0;
stepp = dp * 1.0 / abs_dy;
if (previousPoint.y > pt.y) {
stepy *= -1;
}
}
else
{
times += abs_dx;
stepx = 1.0;
stepy = dy * 1.0 / abs_dx;
stepp = dp * 1.0 / abs_dx;
if (previousPoint.x > pt.x) {
stepx *= -1;
}
}
while (times > 0) {
times = times - 1;
var line_width = (kWIDTH_MAX - kWIDTH_MIN)/pressure_level * p + kWIDTH_MIN;
ctx.lineWidth = line_width;
ctx.beginPath(); //Start path
ctx.arc(x, y, line_width, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure.
ctx.fill();
x += stepx;
y += stepy;
p += stepp;
}
}
}
function velocityFrom(a,b) {
var dx = a.x - b.x;
var dy = a.y - b.y;
var dist = Math.sqrt(a*a + b*b);
var v = dist / (a.time - b.time)
return v;
}
function onTouchDownEvent(x, y, p) {
previousPoint = null;
startPoint = null;
currentPoint = null;
lastVelocity = 0;
//lastWidth = penSize;
var d = new Date();
currentPoint = new Point(x, y, d.getTime());
currentPoint = new Point(x, y, p);
previousPoint = currentPoint;
startPoint = previousPoint;
}
function onTouchMoveEvent(x, y, p) {
if (previousPoint == null) {
return;
}
startPoint = previousPoint;
previousPoint = currentPoint;
var d = new Date();
currentPoint = new Point(x, y, d.getTime());
var velocity = velocityFrom(currentPoint , previousPoint);
drawLine(strokeWidth, velocity, p);
lastVelocity = velocity;
previousPoint = currentPoint;
currentPoint = new Point(x, y, p);
draw_line(currentPoint);
}
function onTouchUpEvent(x, y, p) {
if (previousPoint == null) {
return;
}
startPoint = previousPoint;
previousPoint = currentPoint;
var d = new Date();
currentPoint = new Point(x, y, d.getTime());
drawLine(0, lastVelocity, p);
currentPoint = new Point(x, y, 0);
draw_line(currentPoint);
}
function getStrokeWidth(velocity) {
return penSize - (velocity * STROKE_DES_VELOCITY);
}
function drawLine(currentWidth, velocity, Presure) {
var mid1 = midPoint(previousPoint, startPoint);
var mid2 = midPoint(currentPoint, previousPoint);
draw(mid1, previousPoint, mid2,
currentWidth, velocity, Presure);
}
function getPt(n1, n2, perc) {
var diff = n2 - n1;
return n1 + (diff * perc);
}
function draw(p0, p1, p2, currentWidth, velocity, p) {
var xa, xb, ya, yb, x, y;
var increment;
if (velocity > MIN_VELOCITY_BOUND && velocity < MAX_VELOCITY_BOUND) {
increment = DRAWING_CONSTANT - (velocity * INCREMENT_CONSTANT);
} else {
increment = MIN_INCREMENT;
}
for (var i = 0.0; i < 1.0; i += increment) {
xa = getPt(p0.x, p1.x, i);
ya = getPt(p0.y, p1.y, i);
xb = getPt(p1.x, p2.x, i);
yb = getPt(p1.y, p2.y, i);
x = getPt(xa, xb, i);
y = getPt(ya, yb, i);
changeWidth(p);
ctx.lineWidth = strokeWidth;
ctx.beginPath(); //Start path
ctx.arc(x, y, strokeWidth, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure.
ctx.fill();
}
}
function midPoint(p1, p2) {
return new Point((p1.x + p2.x) / 2.0, (p1.y + p2.y) / 2, (p1.time + p2.time) / 2);
}
//------end
function selectColor(el) {
... ... @@ -973,7 +907,23 @@
var nPress = dv.getUint16(9, true);
var x = dv.getUint16(11, true);
var y = dv.getUint16(13, true);
draw_ext_input(x,y,nPress);
if(14 == type) {
if(rotate_degree == 0) {
draw_ext_input(x,y,nPress);
}
else if(rotate_degree == 90) {
draw_ext_input(y, ext_input_panel_width - x ,nPress);
}
else if(rotate_degree == 180) {
draw_ext_input(x, ext_input_panel_height - y);
}
else {
draw_ext_input(ext_input_panel_height - y, ext_input_panel_width -x);
}
}
else {
draw_ext_input(x,y,nPress);
}
// writeToScreen('<span style="color: green;">pen position: ' + x + ',' + y + ',' + nPress + '</span>');
}
else if( 3 == type ) {
... ... @@ -1345,20 +1295,18 @@
if(cur_pen_type == 0) {
ext_input_panel_width = 21000;
ext_input_panel_height = 29800;
pressure_level = 2048.0;
var w = ext_input_panel_width * 1.0;
var h = ext_input_panel_height * 1.0;
var canvasw = w / h * canvas_height;
ratio_x = (canvasw + 0.0) / ext_input_panel_width;
ratio_y = (canvas_height + 0.0) / ext_input_panel_height;
P_LOW = 300;
P_MIDDLE = 1000;
P_HIGN = 1800;
rotate_degree = 0;
}
else {
P_LOW = 200;
P_MIDDLE = 500;
P_HIGN = 800;
}
pressure_level = 1024.0;
}
cmd.type = 57;
cmd.data_len = 1;
... ... @@ -1385,11 +1333,36 @@
}
}
else if(cmdName == "rotate_ext_input") {
if(cur_pen_type == 0) {
rotate_degree = rotate_degree + 90;
if( rotate_degree == 360) {
rotate_degree = 0;
}
if (rotate_degree == 0 || rotate_gree == 180) {
var w = ext_input_panel_height * 1.0;
var h = ext_input_panel_width * 1.0;
var canvasw = w / h * canvas_height;
ratio_x = (canvasw + 0.0) / w;
ratio_y = (canvas_height + 0.0) / h;
}
else {
var w = ext_input_panel_width * 1.0;
var h = ext_input_panel_height * 1.0;
var canvasw = w / h * canvas_height;
ratio_x = (canvasw + 0.0) / ext_input_panel_width;
ratio_y = (canvas_height + 0.0) / ext_input_panel_height;
}
return;
}
else {
cmd.type = 57;
cmd.data_len = 1;
var buffer = new ArrayBuffer(cmd.data_len);
cmd.data = new Uint8Array(buffer, 0, cmd.data_len);
cmd.data[0] = 2;
}
}
else if(cmdName == "enter_channel"){
cmd.type = 58;
... ...