@bilibili 民用级脑的研发记录 收集raylib样例代码 与重写摄像机拖绘制拖拽放大缩小
版本到13 发现有BUG,每次绘制，拖拽，放大缩小，同时进行，没有之前easyx 的隔离if
绝对重写代码
此例作为raylib 移植摄像机代码测试，各参数位置以及简单api 使用方式
开发流程
1-6是书写 函数使用raylib drawTexture 的参数意义 与BUG发现坐标系变化
7-13是测试新坐标系下的拖拽 绘制 放大缩小 参数计算移植
14-25是解决大地图刷新，网格选择区域刷新移植
26-29是实现拖拽，绘制，居中放大缩小
其中具体部分是先拖拽，绘制单独功能，然后在拖拽追加偏移量，暂存偏移数据，加入到绘制坐标，得到单个区域刷新
然后遇到困难了，网格部分不好写，于是又基于在拖拽，增加网格刷新，实现大地图选择刷新，由此记录当前网格左上角坐标，得到了数据
#include <raylib.h>
// 重整原因：解决新函数放大缩小之下，raylib 的网格采样部分，选择数组的一部分刷新倒缓冲区里
// 从直接建立缓冲区，到先在数组里进行移动，然后再设置检查缓冲区
// 最大距离 - 当前坐标，实现坐标系变化，同时对应最顶上，变成新坐标下的最底下，可750-1=749数数得到
int main() {
int pixnum;
// 屏幕显示的方格个数
int showi;
int showj;
// 比屏幕多出的边距
int side; // 可变边距测试成功
// 一个缓冲区的大小
int bkmeshmapmaxi;
int bkmeshmapmaxj;
int bkmeshwidth;
int bkmeshheight;
// 一个游戏地图的大小
int mapi;
int mapj;
// pixnum = 30;
pixnum = 30; // mesh中一个网格正方形的边长
// int pixnumv2;
// pixnumv2=30;
// showi = 30;
// showj = 30;
// showi = 600;
// showj = 600;
showi = 50;
showj = 50;
side = 20;
// 修正，原来是由于绘制GPU画布采样界限，多余部分会自动镜像绘制，数组越界却没有发生
// 再解释，破案了，数组越界但是没闪退，又有边界检测结果采样不会采样到出界部分。
// 于是增加边界检测
// 边界处理
bkmeshmapmaxi = side + showi + side; // 象形表示，左右各有这样的边距
bkmeshmapmaxj = side + showj + side;
bkmeshwidth = bkmeshmapmaxj * pixnum; // 用于瓦片刷新
bkmeshheight = bkmeshmapmaxi * pixnum;
mapi = bkmeshmapmaxi * 2;
mapj = bkmeshmapmaxj * 2;
int **map;
int **meshmap;
int maxgamex; // 允许的最大位置
int maxgamey;
// 回滚代码，原因是采样区没法修改罢了
maxgamey = mapi * 30 - showi * 30; // 左上角拖拽距离游戏边界差一个背景采样区大小
maxgamex = mapj * 30 - showj * 30;
// 但是发现可以修改粘贴的大小
int showiv2; // 解决showi，j导致显示不全，边距变化后，检测限制的BUG
int showjv2;
showiv2 = 30;
showjv2 = 30;
// 记录bkmeshmap 网格,用于出界刷新
int bkmeshmapi;
int bkmeshmapj;
bkmeshmapi = 0;
bkmeshmapi = 0;
// 拖拽边界
int limitleft;
int limittop;
// 坐标系变化，现在是在底部进行，左下角是0，0原点
limitleft = 0;
limittop = 0;
map = new int*[mapi];
for (int i = 0; i < mapi; i++) {
map[i] = new int[mapj];
}
for (int i = 0; i < mapi; i++) {
for (int j = 0; j < mapj; j++) {
map[i][j] = (j + i) % 27; // 测试数据，渐变 25改105 柔和
}
}
// 测试边界
for (int j = 0; j < mapj; j++) {
map[0][j] = 9999;
map[mapi - 1][j] = 9999;
}
for (int i = 0; i < mapi; i++) {
map[i][0] = 9999;
map[i][mapj - 1] = 9999;
}
meshmap = new int*[bkmeshmapmaxi];
for (int i = 0; i < bkmeshmapmaxi; i++) {
meshmap[i] = new int[bkmeshmapmaxj];
}
for (int i = 0; i < bkmeshmapmaxi; i++) {
for (int j = 0; j < bkmeshmapmaxj; j++) {
meshmap[i][j] = -1;
}
}
// 初始化窗口
InitWindow(1750, 1050, "test for location");
// 设置GPU可以操作的画布,一定要再初始化窗口之后才行，实际上是OpenGL的上下文，或者说默认环境设置
RenderTexture2D mesh = LoadRenderTexture(bkmeshmapmaxi * pixnum, bkmeshmapmaxj * pixnum);
// 设置帧率
SetTargetFPS(160); // 低帧率，四角的矩形会平滑移动效果
// 设置默认绘制到mesh
BeginTextureMode(mesh);
// ******
// 取消绘制的GPU画布
EndTextureMode();
// 设置默认绘制到桌面
BeginDrawing();
// 黑色覆盖全部屏幕
ClearBackground(BLACK);
DrawTexturePro(mesh.texture, {0, 0, 750, 750}, {0, 0, 750, 750}, {0, 0}, 0, WHITE);
// 结束绘制的桌面
EndDrawing();
// 绘制，粘贴自8.测试DrawTexture 与11.备份 10测试
int drawx;
int drawy;
int mousex;
int mousey;
int drawi;
int drawj;
mousex = 0;
mousey = 0;
drawx = 0;
drawy = 0;
drawi = 0;
drawj = 0;
// int mousex;
// int mousey;
// mousex = 0;
// mousey = 0;
// float camerasize;
// camerasize = 1;
// 拖拽
int draftflag;
int draftx;
int drafty;
int gamex;
int gamey;
// 记录长按时，鼠标按下去的位置，减出长按拖拽距离
int oldx;
int oldy;
draftflag = 0;
// xdraftx drafty 一定设置成0，这是在后面会追加mesh的一半，就是mesh中心
draftx = 0;
drafty = 0;
// draftx=bkmeshwidth*pixnum/2;
// drafty=bkmeshheight*pixnum/2;
gamex = 0;
gamey = 0;
// 滚轮放大缩小
float camerasize;
camerasize = 1.0f;
int zoom;
int time;
zoom = 0;
//记录滚轮次数，滚动快，放缩快
int cnt = 0;
// 这里开始主循环
while (!WindowShouldClose()) {
if (IsMouseButtonDown(MOUSE_BUTTON_LEFT)) {
// drawx = GetMousePosition().x;
// 无中生有坐标系变化过程
// 750,实际穷举描述得到，在点一下，在鼠标坐标系是0，100，靠顶边，
// 在GPU坐标系里0，100则是靠底边100像素，
// 然后实际上是直接取反然后加上高度上限，发现原来可以
// 最后重整旧测试代码实现
// drawy = 750 - GetMousePosition().y;
// drawy = 751 - GetMousePosition().y;
// if (drawx < 0 || drawx > 750 || drawy < 0 || drawy > 750)
// 发现可以直接写，标注数据变化，于是重新命名变量
mousex = GetMousePosition().x;
mousey = GetMousePosition().y;
// 测试之后，追加等号，发现等号设置在0处解决问题，750-0=750，750/30=25，数组出界，750-1=749，749/30=24，
// 可知减的多，不出界，剩下的少，于是就不出界
if (mousex < 0 || mousex > showiv2 * pixnum || mousey <= 0 || mousey > showiv2 * pixnum) {
} else {
// int positionx = 0 + draftx/ camerasize;
// int positionx = 0 + draftx + showjv2 * pixnum / 2 - showjv2 * pixnum / 2 / camerasize;
// 解决采样中心是mesh中心后，绘制偏移也修改
int positionx = 0 + draftx + bkmeshwidth / 2 - showjv2 * pixnum / 2 / camerasize;
// int positionx = 0 + draftx + bkmeshwidth / 2 - showjv2 * pixnumv2 / 2 / camerasize;
// int positiony = 0 + drafty / camerasize;
// int positiony = 0 + drafty + showiv2 * pixnum / 2 - showiv2 * pixnum / 2 / camerasize;
int positiony = 0 + drafty + bkmeshheight / 2 - showiv2 * pixnum / 2 / camerasize;
// int positiony = 0 + drafty + bkmeshheight / 2 - showiv2 * pixnumv2 / 2 / camerasize;
// 相对于左下角位置，水平方向就是当前左下角距离加鼠标横着距离左边界
drawx = mousex / camerasize + positionx; // 乘camerasize不行，测试除法，发现也不行,换测试位置
// 回滚，测试发现x 除法可以在水平移动多少，对应绘制多少
// 竖直方向，可以理解成先算距离左下角距离，然后再加上左下角实际对应的地图点
// 缩小后，750变化，可以理解成坐标上限增加，原来坐标系变化需要750-，现在变成1500- 对应两倍坐标系变化
drawy = mousey / camerasize + positiony; // 750/camerasize
// 测试750/camerasize,发现偏移随放大倍数增加，改成乘camerasize 发现刚好适配
drawj = drawx / pixnum;
drawi = (mapi * pixnum - drawy) / pixnum;
// 出界闪退BUG解决方案，drawj没有问题，受到边界限制 maxgamex
if(drawi>=mapi||drawi<0){
}else{
map[drawi][drawj] = 1949;
}
}
}
// 注意是pressed 不是 Down
if (IsMouseButtonPressed(MOUSE_BUTTON_RIGHT)) {
draftflag = 1;
oldx = GetMouseX();
oldy = GetMouseY();
}
if (draftflag == 1) {
mousex = GetMouseX();
mousey = GetMouseY();
draftx = gamex - (mousex - oldx) / camerasize;
drafty = gamey - (mousey - oldy) / camerasize;
}
if (IsMouseButtonUp(MOUSE_BUTTON_RIGHT)) {
draftflag = 0;
oldx = 0;
oldy = 0;
gamex = draftx;
gamey = drafty;
}
// 新增边界检测
if (draftx < 0) {
draftx = 0;
} else if (draftx > maxgamex ) { // 配合limitleft+60 可以看见边界白边
draftx = maxgamex;
}
//打表发现左上角出界刷新，实际比较矩形限制在很小的区域 60*60，原来的表示则是750*750大小的区域
// 0<0不会执行，不能等于，否则出界
if (draftx < limitleft ) {
limitleft -= side * pixnum; // side*pixnum 替换 pixnum 但是 limitleft 不变化
}
if (draftx > limitleft + 2 * side * pixnum) { //+60 改 +30 又改 +60 左上角移动两个边距就是2*30
limitleft += side * pixnum;
}
// 新增边界检测
if (drafty < 0) {
drafty = 0;
} else if (drafty > maxgamey) {
drafty = maxgamey;
}
if (drafty < limittop ) {
limittop -= side * pixnum;
}
if (drafty > limittop + 2 * side * pixnum) { // +60 改 +30 又改 +60，见到底部白边
limittop += side * pixnum;
}
bkmeshmapj = limitleft / pixnum; // 关键在只要保证draftx<=limitleft + 2 * side * pixnum,边界就不会出来刚好靠边，数组打印
// bkmeshmapi = mapi - 1 - bkmeshmapmaxi - limittop / pixnum; // 269 -27 -0 + 27 -i = 269 -i =269 -0 =269 = 数组最后一个
bkmeshmapi = mapi - bkmeshmapmaxi - limittop / pixnum; // 270 -27 -0 + 27 -i = 270 -i =270 -1 =269 = 数组最后一个
// 版本7，继续版本5的调参数
if (GetMouseWheelMove() < 0) {
zoom = -1;
cnt++;
} else if (GetMouseWheelMove() > 0) {
zoom = 1;
cnt--;
}
// 30改10，配合0.99改0.95，增加灵敏度
// 10改5，配合0.95改0.97，增加减少放大差距，提高鼠标滚动延长效果
// 5改5，配合0.97改0.98，增加减少放大差距，提高鼠标滚动延长效果
// 5改5，配合0.98改0.981，复位1.00001，解决无法复位，回不到1问题
// 5改5，配合0.981改0.9811，复位1.00000，解决无法复位，回不到1问题
// 5改5，配合0.981改0.99，复位1.00000，解决到0.01再返回无法复位，回不到1.0问题
if (cnt != 0 && time < 5) {
// 改30参数，影响放缩时间
time++;
if (zoom > 0) {
// 加法改乘法，放大感觉平均，没有了越小，再缩小一次，缩小明显更小的追加情况，原因是数值小了，追加固定数据，倍数影响大
camerasize = camerasize * 0.99;
// 改0.99缩小参数，影响每次循环缩小倍数，一次缩小的突然更小程度
if (camerasize < 0.01) {
camerasize = 0.01;
}
} else if (zoom < 0) {
camerasize = camerasize / 0.99;
if (camerasize > 10) {
camerasize = 10;
}
}
// 解决复位之后，重复写0问题
} else if (time != 0) {
time = 0;
// zoom = 0;
// 多次滚轮，则延长摄像机缩放
if (cnt < 0) {
cnt++;
}
if (cnt > 0) {
cnt--;
}
// 消耗完累计次数，停止滚动
if (cnt == 0) {
zoom = 0;
}
}
// 设置默认绘制到mesh
BeginTextureMode(mesh);
// 改成了1，并且最后是等于号因为等于时，对应数组0，0格子，其实是绘制时发现对不上号和更新总是偏下
for (int i = 1; i <= bkmeshmapmaxi; i++) {
if (bkmeshmapmaxi - i + bkmeshmapi < 0) {
break;
}
for (int j = 0; j < bkmeshmapmaxj; j++) {
if (j + bkmeshmapj > mapj) { // 如果出界就取消绘制
break;
}
if (meshmap[bkmeshmapmaxi - i ][j] == map[bkmeshmapmaxi - i + bkmeshmapi][j + bkmeshmapj]) {
} else {
meshmap[bkmeshmapmaxi - i ][j] = map[bkmeshmapmaxi - i + bkmeshmapi][j + bkmeshmapj];
// 绘制矩形,原点(0,0)在左下角,现在是从左下角一行一行往上绘制
if (map[bkmeshmapmaxi - i + bkmeshmapi][j + bkmeshmapj] == 9999) {
// DrawRectangle(j * pixnum, bkmeshmapmaxi * pixnum - i * pixnum - pixnum, pixnum, pixnum, { 255, 255, 255, 255});
DrawRectangle(j * pixnum, bkmeshmapmaxi * pixnum - i * pixnum, pixnum, pixnum, { 255, 255, 255, 255});
// DrawRectangle(j * pixnum, bkmeshmapmaxi*pixnum-i * pixnum, pixnum, pixnum, {255, 0, 0, 255});
} else if (map[bkmeshmapmaxi - i + bkmeshmapi][j + bkmeshmapj] == 1949) {
DrawRectangle(j * pixnum, bkmeshmapmaxi * pixnum - i * pixnum, pixnum, pixnum, {0, 0, 0, 255});
} else {
// 60是边界，-30是i=0时，要760打印就没有空间了，730打印30高正方形，刚好是760，同时对应底部的黑边消失了，这就是整体下移动30像素
// DrawRectangle(j * 30, 750 + 60 - i * 30 - 30, 30, 30, {map[bkmeshmapmaxi - i + bkmeshmapi][j + bkmeshmapj] * 1 % 255, map[bkmeshmapmaxi - i + bkmeshmapi][j + bkmeshmapj] * 21 % 255, 255, 255});
// 替换常数
// DrawRectangle(j * pixnum, bkmeshmapmaxi * pixnum - i * pixnum -pixnum, pixnum, pixnum, {map[bkmeshmapmaxi - i + bkmeshmapi][j + bkmeshmapj] * 1 % 255, map[bkmeshmapmaxi - i + bkmeshmapi][j + bkmeshmapj] * 21 % 255, 255, 255});
DrawRectangle(j * pixnum, bkmeshmapmaxi * pixnum - i * pixnum, pixnum, pixnum, {map[bkmeshmapmaxi - i + bkmeshmapi][j + bkmeshmapj] * 1 % 255, map[bkmeshmapmaxi - i + bkmeshmapi][j + bkmeshmapj] * 21 % 255, 255, 255});
}
// 左下角
DrawRectangle(0, 0, 150, 150, {154, 154, 154, 255});
// 左上角
DrawRectangle(0, bkmeshmapmaxi * pixnum - 100, 30, 100, {255, 255, 255, 255});
// 屏幕右上角对应的白色矩形
DrawRectangle(bkmeshmapmaxi * pixnum - pixnum, bkmeshmapmaxi * pixnum - 100, 30, 100, {255, 255, 255, 255});
// 屏幕右下角对应的红色矩形
DrawRectangle(bkmeshmapmaxi * pixnum - pixnum, 0, pixnum, 100, {255, 0, 0, 255});
// 绘制坐标系是左下角0，0）y正方向向上
}
}
}
// 取消绘制的GPU画布
EndTextureMode();
// 设置默认绘制到桌面
BeginDrawing();
// 黑色覆盖全部屏幕
ClearBackground(BLACK);
// 采样坐标系是左上角0，0，y轴正方向向下
// 重新理解：由于在不改这行代码的情况下，改其他地方的代码，跑通了。实现了效果，再次理解数据变化：draftx>60时，draftx-limitleft<60,实现在网格缓冲区采样
// 可通过边界白边左上角和右上角左右拖拽可得实际采样位置在缓冲区左右
// DrawTexturePro(mesh.texture, {draftx - limitleft, drafty - limittop, 750 / camerasize, 750 / camerasize}, {0, 0, 750, 750}, {0, 0}, 0, WHITE);
// DrawTexturePro(mesh.texture, {draftx - limitleft, drafty - limittop, showj*pixnum / camerasize, showi*pixnum / camerasize}, {0, 0, showjv2 * pixnum, showiv2 * pixnum}, {0, 0}, 0, WHITE);
// DrawTexturePro(mesh.texture, {draftx - limitleft, drafty - limittop, showj*pixnum / camerasize+700, showi*pixnum / camerasize+700}, {0, 0, showjv2 * pixnum, showiv2 * pixnum}, {0, 0}, 0, WHITE);
// 关于draftx y 和之前的正面没有区别，其实是因为坐标系y轴变化，但是可以变成同一个坐标系，就是一个人倒着看地图，头朝地脚朝天，代码中保留旧形式，只有数组的坐标参考是从最大开始打印的
// DrawTexturePro(mesh.texture, {draftx - limitleft, drafty - limittop, showj*pixnum / camerasize, showi*pixnum / camerasize}, {0, 0, showjv2 * pixnum, showiv2 * pixnum}, {0, 0}, 0, WHITE);
// DrawTexturePro(mesh.texture, {draftx - limitleft, drafty - limittop, showj*pixnum / camerasize, showi*pixnum / camerasize}, {0, 0, showjv2 * pixnum, showiv2 * pixnum}, {0, 0}, 0, WHITE);
// DrawTexturePro(mesh.texture, {(-draftx+750/2)-750/2/camerasize, (-drafty+750/2)-750/2/camerasize, 750 / camerasize, 750 / camerasize}, {0, 0, 750, 750}, {0, 0}, 0, WHITE);
// DrawTexturePro(mesh.texture, {(draftx- limitleft +showjv2*pixnum/2)-showjv2*pixnum/2/camerasize, drafty - limittop, showj*pixnum / camerasize, showi*pixnum / camerasize}, {0, 0, showjv2 * pixnum, showiv2 * pixnum}, {0, 0}, 0, WHITE);
// DrawTexturePro(mesh.texture, {(draftx - limitleft + showjv2*pixnum / 2) - showjv2*pixnum / 2 / camerasize, (drafty - limittop + showiv2 * pixnum / 2) - showiv2*pixnum / 2 / camerasize, showj*pixnum / camerasize, showi*pixnum / camerasize}, {0, 0, showjv2 * pixnum, showiv2 * pixnum}, {0, 0}, 0, WHITE);
// DrawTexturePro(mesh.texture, {(draftx - limitleft + showjv2*pixnum / 2) - showjv2*pixnum / 2 / camerasize, (drafty - limittop + showiv2 * pixnum / 2) - showiv2*pixnum / 2 / camerasize, showjv2*pixnum / camerasize, showiv2*pixnum / camerasize}, {0, 0, showjv2 * pixnum, showiv2 * pixnum}, {0, 0}, 0, WHITE);
// 解决bug 绘制出来是把左上角粘贴到中间，实际改完，增加距离，原来是采样采样多了，中心是mesh的中心所以要加上meshwidth/2
DrawTexturePro(mesh.texture, {(draftx - limitleft )+ bkmeshwidth / 2 - showjv2*pixnum / 2 / camerasize, (drafty - limittop + bkmeshheight / 2) - showiv2*pixnum / 2 / camerasize, showjv2*pixnum / camerasize, showiv2*pixnum / camerasize}, {0, 0, showjv2 * pixnum, showiv2 * pixnum}, {0, 0}, 0, WHITE);
// DrawTexturePro(mesh.texture, {(draftx - limitleft )+ bkmeshwidth / 2 - showjv2*pixnumv2 / 2 / camerasize, (drafty - limittop + bkmeshheight / 2) - showiv2*pixnumv2 / 2 / camerasize, showjv2*pixnumv2 / camerasize, showiv2*pixnumv2 / camerasize}, {0, 0, showjv2 * pixnumv2, showiv2 * pixnumv2}, {0, 0}, 0, WHITE);
DrawText(TextFormat("mouseV1 %.0f,%.0f", GetMousePosition().x, GetMousePosition().y), 35, 12, 30, BLUE);
DrawText(TextFormat("mouseV2 %.0f,%.0f", GetMousePosition().x, 750 - GetMousePosition().y), 35, 62, 30, BLUE);
DrawText(TextFormat("draftxyV2 %d,%d", draftx, drafty), 35, 152, 30, RED);
DrawText(TextFormat("camerasize %f", camerasize), 35, 192, 30, BLACK);
DrawText(TextFormat("limitleft,right %d %d", limitleft, limitleft + 60), 35, 222, 30, BLACK);
DrawText(TextFormat("limittop,bottom %d %d", limittop, limittop + 60 ), 35, 252, 30, BLACK);
DrawText(TextFormat("%i FPS", GetFPS()), 300, 2 + 10, 40, WHITE);
DrawText(TextFormat("maxside j %d", bkmeshmapj + bkmeshmapmaxj ), 340, 20 + 60, 40, WHITE);
DrawText(TextFormat("maxside i %d", bkmeshmapi + bkmeshmapmaxi ), 340, 20 + 100, 40, WHITE);
DrawText(TextFormat("drawjiV2 %d,%d", drawj, drawi), 35, 92, 30, RED);
DrawText(TextFormat("drawxyV2 %d,%d", drawx, drawy), 35, 122, 30, RED);
// 结束绘制的桌面
EndDrawing();
}
}
扫一扫
587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
