[]tiledMap类createMap()创建地图 如何理解这个viewRect视口区
我的理解是：这个viewRect视口区是地图的显示区域 通过改变这个区域来实现地图的移动，视口区大小应该填地图的物理宽高（官网示例填的是设备的物理宽高 不知道是怎么回事（这地方要填什么？？？？？）），但是当我把视口区宽高填成0 0时，创建的地图还能显示？？？？，地图使用的是官网是的示例地图宽高是1280*1280，地图的移动区域按下述代码来说：地图缩放1.2倍 X轴： 1280*1.2-1334=202 Y轴：1280*1.2-750=786 移动区X轴0~202 Y轴 0~786 但是经过调式发现实际是X轴 0~166 Y轴 0~655 不知道各位是如何做的指教一二
现附上代码望各位指点一二：
Laya.init(1334, 750, WebGL);
Laya.stage.scaleMode = Stage.SCALE_FIXED_AUTO;
Laya.stage.alignV = Stage.ALIGN_MIDDLE;
Laya.stage.alignH = Stage.ALIGN_CENTER;
Laya.stage.bgColor = '#0000ff';
Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
var tiledMap;
var viewRect;
var mLastMouseX = 0;
var mLastMouseY = 0;
var mX = 0;
var mY = 0;
(function()
{
createMap();
Laya.stage.on(Event.MOUSE_DOWN, this, mouseDown);
Laya.stage.on(Event.MOUSE_UP, this, mouseUp);
})();
//创建地图
function createMap()
{
//创建地图对象
tiledMap = new TiledMap();
//创建Rectangle实例，视口区域
viewRect = new Laya.Rectangle(0,0,0,0);
mX = mY = 0;
//创建地图，适当的时候调用destory销毁地图
tiledMap.createMap("res/atlas/TiledMap/desert.json", viewRect, new Handler(this, completeHandler));
}
/**
* 地图加载完成的回调
*/
function completeHandler()
{
//设置缩放中心为左上角
tiledMap.setViewPortPivotByScale(0,0);
//放大1.2倍
tiledMap.scale=1.2;
//块的宽高(不知道出来的是什么宽高)
console.log(tiledMap.gridWidth,tiledMap.gridHeight);
//地图宽高
console.log(tiledMap.width,tiledMap.height);
//
console.log(tiledMap.numColumnsGrid,tiledMap.numRowsGrid );
console.log(tiledMap.numColumnsTile,tiledMap.numRowsTile );
console.log(tiledMap.orientation,tiledMap.renderOrder );
console.log(tiledMap.tileWidth,tiledMap.tileHeight );
Laya.stage.on(Event.RESIZE, this, resize);
resize();
}
//鼠标按下拖动地图
function mouseDown()
{
console.log(viewRect.width);
mLastMouseX = Laya.stage.mouseX;
mLastMouseY = Laya.stage.mouseY;
Laya.stage.on(Event.MOUSE_MOVE, this, mouseMove);
}
function mouseMove()
{
//移动地图视口
// console.log("X：",mX - (Laya.stage.mouseX - mLastMouseX))
// console.log("Y: ",mY - (Laya.stage.mouseY - mLastMouseY))
var starX=mX - (Laya.stage.mouseX - mLastMouseX);
var starY=mY - (Laya.stage.mouseY - mLastMouseY);
if(starX<=0){
starX=0;
mX = 0;
}
if(starY<=0){
starY=0;
mY = 0;
}
if(starX>=166){
starX=166;
}
if(starY>=655){
starY=655;
}
tiledMap.moveViewPort(starX, starY);
// console.log(tiledMap.scale);
}
function mouseUp()
{
mX = mX - (Laya.stage.mouseX - mLastMouseX);
mY = mY - (Laya.stage.mouseY - mLastMouseY);
if(mX<=0){
mX=0;
}
if(mY<=0){
mY=0;
}
if(mX>=166){
mX=166;
}
if(mY>=655){
mY=655;
}
//console.log(mX,mY)
Laya.stage.off(Event.MOUSE_MOVE, this, mouseMove);
}
// 窗口大小改变，把地图的视口区域重设下
function resize()
{
//改变地图视口大小
tiledMap.changeViewPort(mX, mY, 1280, 1280);
现附上代码望各位指点一二：
Laya.init(1334, 750, WebGL);
Laya.stage.scaleMode = Stage.SCALE_FIXED_AUTO;
Laya.stage.alignV = Stage.ALIGN_MIDDLE;
Laya.stage.alignH = Stage.ALIGN_CENTER;
Laya.stage.bgColor = '#0000ff';
Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
var tiledMap;
var viewRect;
var mLastMouseX = 0;
var mLastMouseY = 0;
var mX = 0;
var mY = 0;
(function()
{
createMap();
Laya.stage.on(Event.MOUSE_DOWN, this, mouseDown);
Laya.stage.on(Event.MOUSE_UP, this, mouseUp);
})();
//创建地图
function createMap()
{
//创建地图对象
tiledMap = new TiledMap();
//创建Rectangle实例，视口区域
viewRect = new Laya.Rectangle(0,0,0,0);
mX = mY = 0;
//创建地图，适当的时候调用destory销毁地图
tiledMap.createMap("res/atlas/TiledMap/desert.json", viewRect, new Handler(this, completeHandler));
}
/**
* 地图加载完成的回调
*/
function completeHandler()
{
//设置缩放中心为左上角
tiledMap.setViewPortPivotByScale(0,0);
//放大1.2倍
tiledMap.scale=1.2;
//块的宽高(不知道出来的是什么宽高)
console.log(tiledMap.gridWidth,tiledMap.gridHeight);
//地图宽高
console.log(tiledMap.width,tiledMap.height);
//
console.log(tiledMap.numColumnsGrid,tiledMap.numRowsGrid );
console.log(tiledMap.numColumnsTile,tiledMap.numRowsTile );
console.log(tiledMap.orientation,tiledMap.renderOrder );
console.log(tiledMap.tileWidth,tiledMap.tileHeight );
Laya.stage.on(Event.RESIZE, this, resize);
resize();
}
//鼠标按下拖动地图
function mouseDown()
{
console.log(viewRect.width);
mLastMouseX = Laya.stage.mouseX;
mLastMouseY = Laya.stage.mouseY;
Laya.stage.on(Event.MOUSE_MOVE, this, mouseMove);
}
function mouseMove()
{
//移动地图视口
// console.log("X：",mX - (Laya.stage.mouseX - mLastMouseX))
// console.log("Y: ",mY - (Laya.stage.mouseY - mLastMouseY))
var starX=mX - (Laya.stage.mouseX - mLastMouseX);
var starY=mY - (Laya.stage.mouseY - mLastMouseY);
if(starX<=0){
starX=0;
mX = 0;
}
if(starY<=0){
starY=0;
mY = 0;
}
if(starX>=166){
starX=166;
}
if(starY>=655){
starY=655;
}
tiledMap.moveViewPort(starX, starY);
// console.log(tiledMap.scale);
}
function mouseUp()
{
mX = mX - (Laya.stage.mouseX - mLastMouseX);
mY = mY - (Laya.stage.mouseY - mLastMouseY);
if(mX<=0){
mX=0;
}
if(mY<=0){
mY=0;
}
if(mX>=166){
mX=166;
}
if(mY>=655){
mY=655;
}
//console.log(mX,mY)
Laya.stage.off(Event.MOUSE_MOVE, this, mouseMove);
}
// 窗口大小改变，把地图的视口区域重设下
function resize()
{
//改变地图视口大小
tiledMap.changeViewPort(mX, mY, 1280, 1280);
没有找到相关结果
已邀请:
要回复问题请先登录
1 个回复
Aar0n
赞同来自: