Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've been pulling my hair on that one too...</p> <p>I was only able to find a workaround, which works fine as long as you do not apply transformations before drawing your image. It implies that you replace the function <strong>drawImage</strong> in excanvas.js with that one:</p> <pre><code>contextPrototype.drawImage = function(image, var_args) { var dx, dy, dw, dh, sx, sy, sw, sh; // to find the original width we overide the width and height var oldRuntimeWidth = image.runtimeStyle.width; var oldRuntimeHeight = image.runtimeStyle.height; image.runtimeStyle.width = 'auto'; image.runtimeStyle.height = 'auto'; // get the original size var w = image.width; var h = image.height; // and remove overides image.runtimeStyle.width = oldRuntimeWidth; image.runtimeStyle.height = oldRuntimeHeight; if (arguments.length == 3) { dx = arguments[1]; dy = arguments[2]; sx = sy = 0; sw = dw = w; sh = dh = h; } else if (arguments.length == 5) { dx = arguments[1]; dy = arguments[2]; dw = arguments[3]; dh = arguments[4]; sx = sy = 0; sw = w; sh = h; } else if (arguments.length == 9) { sx = arguments[1]; sy = arguments[2]; sw = arguments[3]; sh = arguments[4]; dx = arguments[5]; dy = arguments[6]; dw = arguments[7]; dh = arguments[8]; } else { throw Error('Invalid number of arguments'); } /////////////////////////// MODIFIED BIT /////////////////////////// var vmlStr = []; vmlStr.push('&lt;g_vml_:image src="', image.src, '"', ' style="position:absolute;', ' top:', dy, 'px;', ' left:', dx, 'px;', ' width:', dw, 'px;', ' height:', dh, 'px;"', ' cropleft="', sx / w, '"', ' croptop="', sy / h, '"', ' cropright="', (w - sx - sw) / w, '"', ' cropbottom="', (h - sy - sh) / h, '"', ' /&gt;'); /////////////////////////// END OF MODIFIED BIT /////////////////////////// this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join('')); }; </code></pre> <p>What it does is simply create a VML image directly inside the pseudo canvas, instead of wrapping it inside a group as it was originally done. For some reason, the original code was causing a left and top padding to appear around the image, and can't figure out why. Until we can understand the reason for that, we won't be able to find a proper fix...</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload