正在显示
1 个修改的文件
包含
61 行增加
和
46 行删除
| @@ -389,23 +389,6 @@ | @@ -389,23 +389,6 @@ | ||
| 389 | } | 389 | } |
| 390 | last_ext_press = press; | 390 | last_ext_press = press; |
| 391 | }*/ | 391 | }*/ |
| 392 | - | ||
| 393 | - function draw_ext_input(px, py, press) { | ||
| 394 | - var x = px * ratio_x; | ||
| 395 | - var y = py * ratio_y; | ||
| 396 | - | ||
| 397 | - if(last_ext_press == 0 && press != 0){ | ||
| 398 | - onTouchDownEvent(x, y, press); | ||
| 399 | - } | ||
| 400 | - else if(press != 0) { | ||
| 401 | - onTouchMoveEvent(x, y, press); | ||
| 402 | - } | ||
| 403 | - else if(last_ext_press !=0) { | ||
| 404 | - onTouchUpEvent(x, y, press); | ||
| 405 | - } | ||
| 406 | - last_ext_press = press; | ||
| 407 | - } | ||
| 408 | - | ||
| 409 | function Point(x , y, p) { | 392 | function Point(x , y, p) { |
| 410 | this.x = x; | 393 | this.x = x; |
| 411 | this.y = y; | 394 | this.y = y; |
| @@ -413,7 +396,7 @@ | @@ -413,7 +396,7 @@ | ||
| 413 | } | 396 | } |
| 414 | 397 | ||
| 415 | 398 | ||
| 416 | - var previousPoint, currentPoint; | 399 | + var previousPoint = new Point(0,0,0), currentPoint= new Point(0,0,0); |
| 417 | var kWIDTH_MIN = 0.2; | 400 | var kWIDTH_MIN = 0.2; |
| 418 | var kWIDTH_MAX = 3.0; | 401 | var kWIDTH_MAX = 3.0; |
| 419 | //current width | 402 | //current width |
| @@ -421,6 +404,28 @@ | @@ -421,6 +404,28 @@ | ||
| 421 | var rotate_degree = 0; | 404 | var rotate_degree = 0; |
| 422 | var pressure_level = 2048.0; | 405 | var pressure_level = 2048.0; |
| 423 | 406 | ||
| 407 | + function draw_ext_input(px, py, press) { | ||
| 408 | + if(press == 0) { | ||
| 409 | + previousPoint.p = 0; | ||
| 410 | + } | ||
| 411 | + else { | ||
| 412 | + currentPoint.x = Math.round( px * ratio_x); | ||
| 413 | + currentPoint.y = Math.round( py * ratio_y); | ||
| 414 | + currentPoint.p = press; | ||
| 415 | + | ||
| 416 | + if(previousPoint.p == 0) { | ||
| 417 | + draw_point(currentPoint); | ||
| 418 | + } | ||
| 419 | + else { | ||
| 420 | + draw_line(currentPoint); | ||
| 421 | + } | ||
| 422 | + | ||
| 423 | + previousPoint.x = currentPoint.x; | ||
| 424 | + previousPoint.y = currentPoint.y; | ||
| 425 | + previousPoint.p = currentPoint.p; | ||
| 426 | + } | ||
| 427 | + } | ||
| 428 | + | ||
| 424 | $( function() { | 429 | $( function() { |
| 425 | $( "#line_width_slider" ).slider({ | 430 | $( "#line_width_slider" ).slider({ |
| 426 | range: true, | 431 | range: true, |
| @@ -444,58 +449,68 @@ | @@ -444,58 +449,68 @@ | ||
| 444 | kWIDTH_MIN = strokeWidth / 3; | 449 | kWIDTH_MIN = strokeWidth / 3; |
| 445 | } | 450 | } |
| 446 | 451 | ||
| 452 | + | ||
| 453 | + function draw_point(pt){ | ||
| 454 | + var line_width = (kWIDTH_MAX - kWIDTH_MIN)/pressure_level * pt.p + kWIDTH_MIN; | ||
| 455 | + ctx.beginPath(); //Start path | ||
| 456 | + ctx.arc(pt.x, pt.y, line_width, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure. | ||
| 457 | + ctx.fill(); | ||
| 458 | + } | ||
| 459 | + | ||
| 447 | function draw_line(pt) { | 460 | function draw_line(pt) { |
| 448 | - var x = previousPoint.x; | ||
| 449 | - var y = previousPoint.y; | ||
| 450 | - var p = previousPoint.p; | ||
| 451 | - var stepx, stepy ,stepp; | ||
| 452 | - var times = 1; | ||
| 453 | - | ||
| 454 | var dy = pt.y - previousPoint.y; | 461 | var dy = pt.y - previousPoint.y; |
| 455 | var dx = pt.x - previousPoint.x; | 462 | var dx = pt.x - previousPoint.x; |
| 456 | - var dp = pt.p - previousPoint.p; | 463 | + |
| 457 | var abs_dy = Math.abs(dy); | 464 | var abs_dy = Math.abs(dy); |
| 458 | var abs_dx = Math.abs(dx); | 465 | var abs_dx = Math.abs(dx); |
| 459 | - if(abs_dy < 1 && abs_dx <1) { | ||
| 460 | - if(pt.p > p) { | ||
| 461 | - p = pt.p; | 466 | + |
| 467 | + if(abs_dy < 0.1 && abs_dx < 0.1) { | ||
| 468 | + if(pt.p > previousPoint.p) { | ||
| 469 | + draw_point(pt); | ||
| 462 | } | 470 | } |
| 463 | - var line_width = (kWIDTH_MAX - kWIDTH_MIN)/pressure_level * p + kWIDTH_MIN; | ||
| 464 | - ctx.beginPath(); //Start path | ||
| 465 | - 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. | ||
| 466 | - ctx.fill(); | ||
| 467 | return; | 471 | return; |
| 468 | } | 472 | } |
| 473 | + else if(abs_dy <= 1 && abs_dx <=1) { | ||
| 474 | + draw_point(pt); | ||
| 475 | + return; | ||
| 476 | + } | ||
| 477 | + | ||
| 478 | + | ||
| 479 | + var stepx, stepy ,stepw; | ||
| 480 | + var times = 0; | ||
| 481 | + var w0 = (kWIDTH_MAX - kWIDTH_MIN)/pressure_level * previousPoint.p + kWIDTH_MIN; | ||
| 482 | + var w1 = (kWIDTH_MAX - kWIDTH_MIN)/pressure_level * pt.p + kWIDTH_MIN; | ||
| 483 | + var dw = w1 - w0; | ||
| 484 | + | ||
| 485 | + | ||
| 469 | if (abs_dy >= abs_dx) { | 486 | if (abs_dy >= abs_dx) { |
| 470 | times += abs_dy; | 487 | times += abs_dy; |
| 471 | stepx = dx * 1.0 / abs_dy; | 488 | stepx = dx * 1.0 / abs_dy; |
| 472 | - stepy = 1.0; | ||
| 473 | - stepp = dp * 1.0 / abs_dy; | ||
| 474 | - if (previousPoint.y > pt.y) { | ||
| 475 | - stepy *= -1; | ||
| 476 | - } | 489 | + stepy = dy / abs_dy; |
| 490 | + stepw = dw * 1.0 / abs_dy; | ||
| 477 | } | 491 | } |
| 478 | else | 492 | else |
| 479 | { | 493 | { |
| 480 | times += abs_dx; | 494 | times += abs_dx; |
| 481 | - stepx = 1.0; | 495 | + stepx = dx / abs_dx; |
| 482 | stepy = dy * 1.0 / abs_dx; | 496 | stepy = dy * 1.0 / abs_dx; |
| 483 | - stepp = dp * 1.0 / abs_dx; | ||
| 484 | - if (previousPoint.x > pt.x) { | ||
| 485 | - stepx *= -1; | ||
| 486 | - } | 497 | + stepw = dw * 1.0 / abs_dx; |
| 487 | } | 498 | } |
| 488 | 499 | ||
| 500 | + var x = previousPoint.x + stepx; | ||
| 501 | + var y = previousPoint.y + stepy; | ||
| 502 | + var w = w0 + stepw; | ||
| 503 | + | ||
| 489 | while (times > 0) { | 504 | while (times > 0) { |
| 490 | times = times - 1; | 505 | times = times - 1; |
| 491 | - var line_width = (kWIDTH_MAX - kWIDTH_MIN)/pressure_level * p + kWIDTH_MIN; | ||
| 492 | - ctx.lineWidth = line_width; | 506 | + |
| 507 | + ctx.lineWidth = w; | ||
| 493 | ctx.beginPath(); //Start path | 508 | ctx.beginPath(); //Start path |
| 494 | - 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. | 509 | + ctx.arc(x, y, w, 0, Math.PI * 2, true); // Draw a point using the arc function of the canvas with a point structure. |
| 495 | ctx.fill(); | 510 | ctx.fill(); |
| 496 | x += stepx; | 511 | x += stepx; |
| 497 | y += stepy; | 512 | y += stepy; |
| 498 | - p += stepp; | 513 | + w += stepw; |
| 499 | } | 514 | } |
| 500 | } | 515 | } |
| 501 | 516 |
-
请 注册 或 登录 后发表评论