例子：
假设我有一个512x512分辨率的画布我想得到它的坐标如下：
第一步：将每个画布划分为笛卡尔坐标象限
_____ _____ | | | | 2 | 1 | |_____|_____| | | | | 3 | 4 | |_____|_____|
Second step : Divide each quadrant to another four quadrants and add new quadrant id after the old one , like this :
_____ _____ _____ _____ | | | | | | 22 | 21 | 12 | 11 | |_____|_____|_____|_____| | | | | | | 23 | 24 | 13 | 14 | |_____|_____|_____|_____| | | | | | | 32 | 31 | 42 | 41 | |_____|_____|_____|_____| | | | | | | 33 | 34 | 43 | 44 | |_____|_____|_____|_____|
And so on...
_____ _____ _____ _____ _____ _____ _____ _____ | | | | | | | | | | 222 | 221 | 212 | 211 | 122 | 121 | 112 | 111 | |_____|_____|_____|_____|_____|_____|_____|_____| | | | | | | | | | | 223 | 224 | 213 | 214 | 123 | 124 | 113 | 114 | |_____|_____|_____|_____|_____|_____|_____|_____| | | | | | | | | | | 232 | 231 | 242 | 241 | 132 | 131 | 142 | 141 | |_____|_____|_____|_____|_____|_____|_____|_____| | | | | | | | | | | 233 | 234 | 243 | 244 | 133 | 134 | 143 | 144 | |_____|_____|_____|_____|_____|_____|_____|_____| | | | | | | | | | | 322 | 321 | 312 | 311 | 422 | 421 | 412 | 411 | |_____|_____|_____|_____|_____|_____|_____|_____| | | | | | | | | | | 323 | 324 | 313 | 314 | 423 | 424 | 413 | 414 | |_____|_____|_____|_____|_____|_____|_____|_____| | | | | | | | | | | 332 | 331 | 342 | 341 | 432 | 431 | 442 | 441 | |_____|_____|_____|_____|_____|_____|_____|_____| | | | | | | | | | | 333 | 334 | 343 | 344 | 433 | 434 | 443 | 444 | |_____|_____|_____|_____|_____|_____|_____|_____|
Until number of quadrants is equal to the number of pixels
I am trying to wrap my head here, about how to implement this functionality.First i thought of doing a function which will get an imageData index and return it's quadrant id . But this way i'll have to do some heavy(?) computation each time the function is called .
Or To generate a new array from imageData and access its elements by index when i need them .
I'm sure there are a couple of ways one could tackle this problem . A recursive approach is interesting , is it possible on a bigger canvas ?
Friend of mine pointed me to the following piece of code that does something very similar , but i am struggling to follow whats going on here :
for (var y = 0; y < 512; y++)
for (var x = 0; x < 512; x++){
var s = "";
for (var b = 1; b <= 256; b *= 2){
var yb = y & b;
var xb = x & b;
s = String.fromCharCode(49 + (xb != yb) + yb / b * 2) + s;
}
}
我不知道二进制数，还是魔法数这是一串
49用它作为起点是个好主意吗？ 最佳答案
假设您的图像有2^p width==高度。
一个像素的每个（x，y）坐标都有一个x和y，用p位编码。
好的是象限坐标只是x和y坐标的交错：
我们可以一点一点地把x写成：
x = x(p-1) x(p-2) ... x2 x1 x0
你是：
x = y(p-1) y(p-2) ... y2 y1 y0
那么q是x和y的交错：
q = x(p-1)y(p-1) x(p-2)y(p-2) ... x2y2 x1y1 x0y0
q是您正在搜索的象限坐标，但它的构建方式如下：
_____ _____
| | |
| 0 | 2 |
|_____|_____|
| | |
| 1 | 3 |
|_____|_____|
也许这个计划更明确如下：
x = 0 x = 1
_____________
| | |
| 00 | 10 | y = 0
|______|______|
| | |
| 01 | 11 | y = 1 (figures inside are in binary form)
|______|______|
实际上，在上面的方案中，x是按第一位编码的，y是按第二位编码的。
更一般地，在最上面的象限中，一个点只依赖于x中的上位和y中的上位。
你可以很快想象，如果x>255，我们在右边，否则我们在左边。对y也是一样：如果y255，我们不在上面测试x>255是否与测试x&256=>测试是否设置了最重要的位相同。
事实上，如果你仔细考虑，同样的计划将在所有的决议：假设我们是在象限00。现在看看我们是在这个象限的左边还是右边，我们将x与127进行比较对y也是，所以实际上我们在测试x和y的第二位。
所以你可以看到，两乘二，（x，y）点的交错位描述了点象限[xp-1yp-1]，[xp-2yp-2]，…，[x2y2]，[x1y1]，[x0y0]
现在的代码，你可以在这里找到live：http://jsbin.com/cavifito/1/edit?js,console
x，y->象限坐标函数是非常简单的位混合：
var widthLog=10; // 2^10 = 1024 X 1024 picture
function getQuadrant(x,y) {
var q=0;
var mask = 1 << (widthLog-1) ;
for (var i=0; i<widthLog; i++) {
q<<=1;
q |= ((x & mask ) == mask);
q<<=1;
q |= ((y & mask) == mask);
x<<=1; y<<=1;
}
return q;
}
另一方面，象限坐标->（x，y）函数是：
function getCoords(q, pt) {
var x=0, y=0;
var mask = 1 << (2*(widthLog)-1) ;
for (var i=0; i<widthLog; i++) {
x<<=1;
x |= ((q & mask)==mask);
q<<=1;
y<<=1;
y |= ((q & mask)==mask);
q<<=1;
}
pt.x = x;
pt.y = y;
}
这里有一个方便的函数，可以将象限转换为人类可读的数字（每个数字代表一个象限）。
function quadrantToNum ( q ) {
var res = 0;
var bitIndex = 2*widthLog ;
var mask = 3 << (bitIndex);
while ( mask ) {
var qi = (q & mask) >> bitIndex ;
bitIndex -=2 ;
mask >>= 2;
res = 10*res + qi ;
}
return res;
}
widthlog=2/width=4的结果：
00 02 20 22
01 03 21 23
10 12 30 32
11 13 31 33
widthlog=3/width=8的结果：
000 002 020 022 200 202 220 222
001 003 021 023 201 203 221 223
010 012 030 032 210 212 230 232
011 013 031 033 211 213 231 233
100 102 120 122 300 302 320 322
101 103 121 123 301 303 321 323
110 112 130 132 310 312 330 332
111 113 131 133 311 313 331 333
关于javascript - 如何将 Canvas imageData转换为嵌套象限，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23180672/