FWD » Core Development » User Interface

=== modified file 'src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer.js'

--- src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer.js	2016-01-29 15:50:34 +0000

+++ src/com/goldencode/p2j/ui/client/gui/driver/web/res/p2j.canvas_renderer.js	2016-02-13 21:50:19 +0000

@@ -23,6 +23,7 @@

 **     SBI 20160111 Rewrite the copy of the target image taking into account the Chrome's

 **                  getImageData implementation.

 **     CA  20160129 Removed the "ctx" parameter from the CanvasRenderer APIs.

+**     SBI 20160213 Reduced putImageData invocations for horizontal and vertical lines.

 */

 "use strict";

@@ -88,6 +89,9 @@

    /** True value indicates XOR composite operation will be applied. */

    this.compositeModeOn = false;

+   /** The screen capture used by drawing primitives */

+   this.screenCapture = this.ctx.getImageData(0, 0, 1, 1);

+   

    // force all drawing to be inside pixel "cells" instead of "stradling" between two cells

    // which is the default; this eliminates much of the worst of the anti-aliasing and

    // positioning problems inherent in canvas operations; this will also save off the

@@ -502,7 +506,7 @@

 {

    // holds the line pixels to draw

    var path = [];

-

+   

    x1 = x1 + this.origin.x;

    x2 = x2 + this.origin.x;

@@ -523,6 +527,93 @@

    var dx = Math.abs(x2 - x1);

    var dy = Math.abs(y2 - y1);

+   var directStroke = this.strokesManager.isDirectDrawingStrokeStyle(this.strokeStyleId);

+   

+   if (dx === 0 || dy === 0)

+   {

+      var width  = dx + 1;

+      var height = dy + 1;

+      

+      var buffer = new ArrayBuffer(4 * width * height);

+      

+      var imageData = new Uint8ClampedArray(buffer);

+      

+      var x = x1;

+      var y = y1;

+      var curr = 0;

+      while(x <= x2 && y <= y2)

+      {

+         if (directStroke)

+         {

+            imageData[curr++] = color[0];

+            imageData[curr++] = color[1];

+            imageData[curr++] = color[2];

+            imageData[curr++] = 255;

+         }

+         path.push({x : x, y : y});

+         if (dy === 0)

+         {

+            x = x + 1;

+         }

+         else

+         {

+            y = y + 1;

+         }

+         

+      }

+      if (directStroke)

+      {

+         this.screenCapture = this.ctx.getImageData(x1, y1, width, height);

+         if (p2j.isChrome)

+         {

+            copyImage(this.screenCapture, this.screenCapture.data, imageData, width, height, 0);

+         }

+         else

+         {

+            this.screenCapture.data.set(imageData, 0);

+         }

+         this.ctx.putImageData(this.screenCapture, x1, y1);

+      }

+   }

+   else

+   {

+      path = drawSlopedLineSegment(this, x1, y1, x2, y2, color, directStroke);

+   }

+   

+   return path;

+};

+

+/**

+ * Draw a sloped line in the given color from (x1, y1) to (x2, y2) inclusive, using direct drawing.

+ * <p>

+ * This is an implementation of the well known 50+ year old Bresenham algorithm.

+ *

+ * @param    {CanvasRenderer} renderer

+ *           The canvas renderer.

+ * @param    {Number} x1

+ *           X coordinate of the starting pixel to be drawn.

+ * @param    {Number} y1

+ *           Y coordinate of the starting pixel to be drawn.

+ * @param    {Number} x2

+ *           X coordinate of the ending pixel to be drawn.

+ * @param    {Number} y2

+ *           Y coordinate of the ending pixel to be drawn.

+ * @param    {Number[]} color

+ *           Array of 3 integer values between 0 and 255 inclusive, representing an RGB color.

+ * @param    {Boolean} draw

+ *           True indicates that the line pixels are drawn on the canvas by the renderer.

+ * 

+ * @return   {Array} path

+ *           The {x:.,y:.} point per a pixel array that represents the drawing line segment.

+ */

+function drawSlopedLineSegment(renderer, x1, y1, x2, y2, color, draw)

+{

+   // holds the line pixels to draw

+   var path = [];

+   

+   var dx = Math.abs(x2 - x1);

+   var dy = Math.abs(y2 - y1);

+

    var xIncr = x1 < x2 ? 1 : -1;

    var yIncr = y1 < y2 ? 1 : -1;

@@ -533,15 +624,13 @@

    var x = x1;

    var y = y1;

-   

    var tooMany = 0;

-   var directStroke = this.strokesManager.isDirectDrawingStrokeStyle(this.strokeStyleId);

    while (true)

    {

-      if (directStroke)

+      if (draw)

       {

-         this.drawPixel(x, y, color);

+         renderer.drawPixel(x, y, color);

       }

       path.push({x : x, y : y});

@@ -555,7 +644,7 @@

       {

          if (tooMany > 10000)

          {

-            this.logger.logFormatted("Bresenham is out of control for x1 = %d, y1 = %d,"

+            renderer.logger.logFormatted("Bresenham is out of control for x1 = %d, y1 = %d,"

                      + " x2 = %d, y2 = %d and current x = %d, y = %d!",[x1, y1, x2, y2, x, y]);

             console.trace();

             break;

@@ -578,7 +667,7 @@

    }

    return path;

-};

+}

 /**

  * Draw a line in the given color from (x1, y1) to (x2, y2) inclusive, using direct drawing and

@@ -631,12 +720,12 @@

  */

 CanvasRenderer.prototype.strokeLineSegment = function(x1, y1, x2, y2, color)

 {

-   var path = this.drawLineSegment(x1, y1, x2, y2, color);

+   var segment = this.drawLineSegment(x1, y1, x2, y2, color);

    this.strokesManager.applyStrokeToPath(this,

          this.strokeStyleId,

          this.strokeWidth,

          color,

-         path);

+         segment);

 }

 /**