| 282 |
282 |
return LineStrokeEnum.DEFAULT;
|
| 283 |
283 |
}
|
| 284 |
284 |
|
|
285 |
function createAndFillPenImage(canvasRenderer, width, color)
|
|
286 |
{
|
|
287 |
var penImage = canvasRenderer.createImageData(width, width);
|
|
288 |
var data = penImage.data;
|
|
289 |
|
|
290 |
var length = 4 * width * width;
|
|
291 |
|
|
292 |
// Fill first pixel with color
|
|
293 |
data[0] = color[0];
|
|
294 |
data[1] = color[1];
|
|
295 |
data[2] = color[2];
|
|
296 |
data[3] = 255;
|
|
297 |
|
|
298 |
var pos = 4;
|
|
299 |
var seqLen = 4;
|
|
300 |
while(pos < length)
|
|
301 |
{
|
|
302 |
data.copyWithin(pos, 0, seqLen);
|
|
303 |
// increment position by the length of the current segment
|
|
304 |
pos += seqLen;
|
|
305 |
// double the length of the next segment
|
|
306 |
seqLen <<= 1;
|
|
307 |
}
|
|
308 |
|
|
309 |
return penImage;
|
|
310 |
}
|
|
311 |
|
| 285 |
312 |
/**
|
| 286 |
313 |
* Defines StrokeRenderer class
|
| 287 |
314 |
*/
|
| ... | ... | |
| 346 |
373 |
{
|
| 347 |
374 |
var state = {};
|
| 348 |
375 |
var width = basicStroke.getWidth();
|
| 349 |
|
var pixel = canvasRenderer.createImageData(width, width);
|
|
376 |
var pixel = createAndFillPenImage(canvasRenderer, width, strokeColor);
|
| 350 |
377 |
var pixelData = pixel.data;
|
| 351 |
378 |
|
| 352 |
|
var length = 4 * width * width;
|
| 353 |
|
|
| 354 |
|
// Fill a line image with the given stroke color
|
| 355 |
|
pixelData[0] = strokeColor[0];
|
| 356 |
|
pixelData[1] = strokeColor[1];
|
| 357 |
|
pixelData[2] = strokeColor[2];
|
| 358 |
|
pixelData[3] = 255;
|
| 359 |
|
|
| 360 |
|
var pos = 4;
|
| 361 |
|
var seqLen = 4;
|
| 362 |
|
while(pos < length)
|
| 363 |
|
{
|
| 364 |
|
pixelData.copyWithin(pos, 0, seqLen);
|
| 365 |
|
// increment position by the length of the current segment
|
| 366 |
|
pos += seqLen;
|
| 367 |
|
// double the length of the next segment
|
| 368 |
|
seqLen <<= 1;
|
| 369 |
|
}
|
| 370 |
|
|
| 371 |
379 |
/**
|
| 372 |
380 |
* Normalizes a dash offset distance according to the given dash pattern.
|
| 373 |
381 |
* A normalized dash offset distance is a distance that is cut the corresponding segment
|
| ... | ... | |
| 543 |
551 |
*/
|
| 544 |
552 |
function DefaultPathRenderer(canvasRenderer, basicStroke, strokeColor)
|
| 545 |
553 |
{
|
|
554 |
var width = basicStroke.getWidth();
|
|
555 |
var pixel = createAndFillPenImage(canvasRenderer, width, strokeColor);
|
|
556 |
var pixelData = pixel.data;
|
| 546 |
557 |
var color = strokeColor.concat([255]);
|
| 547 |
|
var width = basicStroke.getWidth();
|
| 548 |
|
|
|
558 |
/** lines in this path */
|
|
559 |
var lines = [];
|
|
560 |
var count = 0;
|
| 549 |
561 |
/**
|
| 550 |
562 |
* Prepares the given stroke to be applied to the line of pixels called a path.
|
| 551 |
563 |
*/
|
| 552 |
564 |
this.beginStroke = function()
|
| 553 |
565 |
{
|
| 554 |
566 |
// TODO: hc
|
|
567 |
lines.length = 0;
|
|
568 |
count = 0;
|
| 555 |
569 |
}
|
| 556 |
570 |
|
| 557 |
571 |
/**
|
| ... | ... | |
| 569 |
583 |
*/
|
| 570 |
584 |
this.strokeLine = function(x1, y1, x2, y2)
|
| 571 |
585 |
{
|
|
586 |
lines.push([x1, y1, x2, y2]);
|
|
587 |
count++;
|
| 572 |
588 |
var c1 = color[0];
|
| 573 |
589 |
var c2 = color[1];
|
| 574 |
590 |
var c3 = color[2];
|
| 575 |
591 |
var c4 = color[3];
|
| 576 |
|
if (!c4)
|
| 577 |
|
{
|
| 578 |
|
c4 = 255;
|
| 579 |
|
}
|
|
592 |
|
|
593 |
var w = width / 2.0;
|
| 580 |
594 |
|
| 581 |
595 |
if (y1 == y2)
|
| 582 |
596 |
{
|
| 583 |
597 |
return [
|
| 584 |
|
[x1, y1, x1, y1 + width, x2, y2, c1, c2, c3, c4],
|
| 585 |
|
[x2, y2, x2, y2 + width, x1, y1 + width, c1, c2, c3, c4]
|
| 586 |
|
];
|
|
598 |
[x1, y1, x1, y1 + w, x2, y2, c1, c2, c3, c4],
|
|
599 |
[x1, y1, x1, y1 - w, x2, y2, c1, c2, c3, c4],
|
|
600 |
[x2, y2, x2, y2 + w, x1, y1 + w, c1, c2, c3, c4],
|
|
601 |
[x2, y2, x2, y2 - w, x1, y1 - w, c1, c2, c3, c4]
|
|
602 |
];
|
| 587 |
603 |
}
|
| 588 |
604 |
else if (x1 == x2)
|
| 589 |
605 |
{
|
| 590 |
606 |
return [
|
| 591 |
|
[x1, y1, x1 + width, y1, x2, y2, c1, c2, c3, c4],
|
| 592 |
|
[x2, y2, x2 + width, y2, x1 + width, y1, c1, c2, c3, c4]
|
| 593 |
|
];
|
|
607 |
[x1, y1, x1 + w, y1, x2, y2, c1, c2, c3, c4],
|
|
608 |
[x1, y1, x1 - w, y1, x2, y2, c1, c2, c3, c4],
|
|
609 |
[x2, y2, x2 + w, y2, x1 + w, y1, c1, c2, c3, c4],
|
|
610 |
[x2, y2, x2 - w, y2, x1 - w, y1, c1, c2, c3, c4]
|
|
611 |
];
|
| 594 |
612 |
}
|
| 595 |
613 |
else
|
| 596 |
614 |
{
|
| 597 |
|
// TODO: sloped line
|
|
615 |
var a = x2-x1;
|
|
616 |
var b = y2-y1;
|
|
617 |
var l = Math.sqrt(a*a + b*b);
|
|
618 |
//var n = [-b, a];
|
|
619 |
var bx1 = x1 - w*b/l;
|
|
620 |
var by1 = y1 + w*a/l;
|
|
621 |
var cx1 = x1 + w*b/l;
|
|
622 |
var cy1 = y1 - w*a/l;
|
|
623 |
var bx2 = x2 - w*b/l;
|
|
624 |
var by2 = y2 + w*a/l;
|
|
625 |
var cx2 = x2 + w*b/l;
|
|
626 |
var cy2 = y2 - w*a/l;
|
|
627 |
|
|
628 |
return [ [x1, y1, bx1, by1, x2, y2, c1, c2, c3, c4],
|
|
629 |
[x1, y1, cx1, cy1, x2, y2, c1, c2, c3, c4],
|
|
630 |
[bx1, by1, bx2, by2, x2, y2, c1, c2, c3, c4],
|
|
631 |
[cx1, cy1, cx2, cy2, x2, y2, c1, c2, c3, c4]
|
|
632 |
];
|
| 598 |
633 |
}
|
| 599 |
634 |
}
|
| 600 |
635 |
|
| ... | ... | |
| 635 |
670 |
this.strokePoint = function(x, y)
|
| 636 |
671 |
{
|
| 637 |
672 |
// TODO: hc
|
|
673 |
canvasRenderer.drawImage(x, y, width, width, pixelData);
|
| 638 |
674 |
}
|
| 639 |
675 |
}
|
| 640 |
676 |
|