From 988c173937eecc69959415c045325845d9044288 Mon Sep 17 00:00:00 2001 From: Pascal Weyprecht Date: Mon, 23 Sep 2024 13:46:16 +0200 Subject: [PATCH 1/3] reseting parameters of canvas like gcdata does reset lineDash and other properties according to GCData GCData is recreated every paint with default parameters, so this should simulate the same behaviour. Also-by: Ralf Schlesinger --- bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js b/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js index cb29bc6140..8679d23bfd 100644 --- a/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js +++ b/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js @@ -73,12 +73,22 @@ rwt.qx.Class.define( "rwt.widgets.GC", { this._paused = false; this._pendingOperations = null; this._cleanPendingImages(); + + // reset lineDash and other properties according to GCData + // GCData is recreated every paint with default parameters, + // so this should simulate the same behaviour. + this._context.setLineDash([]); + this._context.lineWidth = 0; + this._context.globalAlpha = 1.0; + this._context.lineCap = "butt"; + this._context.lineJoin = "miter"; + this._draw( operations, 0 ); }, _draw : function( operations, startOffset ) { var offset = startOffset; - while( offset < operations.length ) { + while( offset < operations.length ) { try { var op = operations[ offset ][ 0 ]; switch( op ) { @@ -92,7 +102,7 @@ rwt.qx.Class.define( "rwt.widgets.GC", { this._setProperty( operations[ offset ] ); break; case "lineDash": - this._context.setLineDash( operations[ offset ][ 1 ] ); + this._context.setLineDash( operations[ offset ][ 1 ] ); break; case "createLinearGradient": case "addColorStop": From f09a3fb976434b785716a065f4210add0c5dcb26 Mon Sep 17 00:00:00 2001 From: Pascal Weyprecht Date: Mon, 23 Sep 2024 13:48:15 +0200 Subject: [PATCH 2/3] lets just use ellipse instead of arc with scaling Also-by: Ralf Schlesinger --- bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js b/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js index 8679d23bfd..2568296dea 100644 --- a/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js +++ b/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js @@ -230,15 +230,13 @@ rwt.qx.Class.define( "rwt.widgets.GC", { var cy = operation[ 2 ]; var rx = operation[ 3 ]; var ry = operation[ 4 ]; - //var rotation = operation[ 5 ]; // not supported + var rotation = operation[ 5 ]; var startAngle = operation[ 6 ]; var endAngle = operation[ 7 ]; var dir = operation[ 8 ]; - if( rx > 0 && ry > 0 ) { - this._context.translate( cx, cy ); - // TODO [tb] : using scale here changes the stroke-width also, looks wrong - this._context.scale( 1, ry / rx ); - this._context.arc( 0, 0, rx, startAngle, endAngle, dir ); + if( rx > 0 && ry > 0 ) { + // [pw] : lets just use ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) + this._context.ellipse(cx, cy, rx, ry, rotation, startAngle, endAngle, dir); } }, From d5e9892b39e941d42331118b292448c7ac136844 Mon Sep 17 00:00:00 2001 From: Pascal Weyprecht Date: Mon, 23 Sep 2024 13:50:48 +0200 Subject: [PATCH 3/3] using scale to draw double the pixels in canvas of the browser you can count the pixels if there is dpi scaling on or you zoom in a little bit. This just draws more pixels, so it looks smoother. Also-by: Ralf Schlesinger --- .../org.eclipse.rap.rwt/js/rwt/widgets/GC.js | 22 +++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js b/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js index 2568296dea..f08ff62949 100644 --- a/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js +++ b/bundles/org.eclipse.rap.rwt/js/rwt/widgets/GC.js @@ -21,6 +21,7 @@ rwt.qx.Class.define( "rwt.widgets.GC", { this._control.addEventListener( "changeHeight", this._onControlChangeHeight, this ); this._canvas = null; this._context = null; + this._scale = 2; this._createCanvas(); this._canvas.rwtObject = this; // like "rwtWidget" in Widget.js, useful for custom JS components if( this._control.isCreated() ) { @@ -83,11 +84,13 @@ rwt.qx.Class.define( "rwt.widgets.GC", { this._context.lineCap = "butt"; this._context.lineJoin = "miter"; + this._ensureScaling(); + this._draw( operations, 0 ); }, _draw : function( operations, startOffset ) { - var offset = startOffset; + var offset = startOffset; while( offset < operations.length ) { try { var op = operations[ offset ][ 0 ]; @@ -113,9 +116,11 @@ rwt.qx.Class.define( "rwt.widgets.GC", { case "setTransform": case "resetClip": this[ "_" + op ]( operations[ offset ] ); + this._ensureScaling(); break; default: this._context[ op ].apply( this._context, operations[ offset ].slice( 1 ) ); + this._ensureScaling(); break; } } catch( ex ) { @@ -163,8 +168,10 @@ rwt.qx.Class.define( "rwt.widgets.GC", { _createCanvas : function() { this._canvas = document.createElement( "canvas" ); - this._canvas.style.display = 'block'; + this._canvas.style.display = 'block'; this._context = this._canvas.getContext( "2d" ); + + this._context.scale(this._scale, this._scale); }, _applyCurrentState: function(state) { @@ -194,17 +201,24 @@ rwt.qx.Class.define( "rwt.widgets.GC", { _onControlChangeWidth : function( event ) { var width = event.getValue(); - this._canvas.width = width; + this._canvas.width = (width * this._scale); this._canvas.style.width = width + "px"; }, _onControlChangeHeight : function( event ) { var height = event.getValue(); - this._canvas.height = height; + this._canvas.height = (height * this._scale); this._canvas.style.height = height + "px"; }, + + _ensureScaling : function() { + // Reset current transformation matrix to the identity matrix + this._context.setTransform(1, 0, 0, 1, 0, 0); + this._context.scale(this._scale, this._scale); + }, _initClipping : function( x, y, width, height ) { + this._ensureScaling(); this._context.clearRect( x, y, width, height ); this._context.beginPath(); this._context.rect( x, y, width, height );