在javascript中，如何反转画布的y轴? [英] In javascript , how to reverse y axis of canvas?

问题描述

我从1D数组中的2d图像中获取数据，绘图很完美，但是我想反转y轴.我看到了 ctx.transform 的提示，但在此示例中似乎不起作用:

I have data from 2d image in a 1D array, plot is perfect but I would like to reverse y axis. I saw tips with ctx.transform but it doesn't seems to work on this example:

https://jsfiddle.net/92j9r2j4/2/

仅以Z数组为例，Z [n * n-1]用于标记拐角.

Z array just for example, Z[n*n-1] is used to mark the corner.

推荐答案

ctx.putImageData 不受变换的影响.

图像数据函数getImageData和putImageData不受当前转换的影响.它们是内存不可用(移动)功能，而不是图形功能.

ctx.putImageData is not affected by transform.

The image data functions getImageData and putImageData are not affected by the current transform. They are memory blit (move) functions not graphical functions.

您有几种选择.

在这种情况下，您可以正常创建数据，但是在将内容复制到画布后，可以使用以下转换在画布上绘制画布: ctx.setTransform(1,0,0，-1,0，n-1).如果您有透明像素，则需要使用复合模式复制" 替换像素而不是混合像素.

In this case you create the data as normal but after you copy the content to the canvas you draw the canvas over itself with the transform ctx.setTransform(1,0,0,-1,0,n - 1). If you had transparent pixels you would need to use the composite mode "copy" to replace pixels rather than blend them.

var i,j;
const n = 200;
const size = n ** 2;  // ** is to power of
//const canvas = document.querySelector('canvas'); // not needed canvas is 
                                                   // already defined with 
                                                   // id="canvas"
const ctx = canvas.getContext("2d");
const imgData = ctx.createImageData(n, n);
const Z = [];
for (j = 0; j < size; j ++) { Z[j] = j * 256 / size }
Z[n * n - 1] = 0;
i = 0;
for (j = 0; j < size; j++) {
  imgData.data[i++] = Z[j];
  imgData.data[i++] = Z[j];
  imgData.data[i++] = Z[j];
  imgData.data[i++] = 255;
}
ctx.putImageData(imgData, 0, 0);

// flip the canvas
ctx.transform(1, 0, 0, -1, 0, canvas.height)
ctx.globalCompositeOperation = "copy"; // if you have transparent pixels
ctx.drawImage(ctx.canvas,0,0);
ctx.globalCompositeOperation = "source-over"; // reset to default

<canvas id="canvas" width=200 height=200></canvas>

在这种情况下，通过计算每个像素的翻转索引，可以将数据从数组复制到图像数据数组时翻转数据.

In this case you flip the data as you copy it from the array to the image data array by calculating the flipped index for each pixel.

var i,j;
const n = 200;
const size = n ** 2;  // ** is to power of
const ctx = canvas.getContext("2d");
const imgData = ctx.createImageData(n, n);
const Z = [];
for (j = 0; j < size; j++) { Z[j] = j * 256 / size }
Z[size - 1] = 0;
var i = 0;
for (j = 0; j < size; j++) {
  // get the index mirrored pixel
  i = (((n - 1) - ((j / n) | 0)) * n + (j % n)) * 4;
  imgData.data[i++] = Z[j];
  imgData.data[i++] = Z[j];
  imgData.data[i++] = Z[j];
  imgData.data[i++] = 255;
}
ctx.putImageData(imgData, 0, 0);

<canvas id="canvas" width=200 height=200></canvas>

在此示例中，您创建了翻转的数据.

In this example you create the data flipped.

不是这个例子，数据在x和y中被翻转.注册标记保持不变.

Not this example the data is flipped in x and y. The registration mark remains the same.

var i,j;
const n = 200;
const size = n ** 2;  // ** is to power of
const ctx = canvas.getContext("2d");
const imgData = ctx.createImageData(n, n);
const Z = new Uint8Array(n*n); // use an 8 bit array as a standard array will
                               // will be marked as sparse (slow) if you add
                               // out of order
for (j = 0; j < size ; j ++) {
    // reverse the order of values
    Z[size - 1 - j] = j * 256 / size; 
}
Z[n - 1] = 0;  // add black pixel at top right
i = 0;
for (j = 0; j < size; j ++) {
  imgData.data[i++] = Z[j];
  imgData.data[i++] = Z[j];
  imgData.data[i++] = Z[j];
  imgData.data[i++] = 255;
}
ctx.putImageData(imgData, 0, 0);

<canvas id="canvas" width=200 height=200></canvas>

这篇关于在javascript中，如何反转画布的y轴?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！