lufy's legend

标题: 缩放后坐标位置 [打印本页]

作者: ningbnii 时间: 2020-2-8 09:54
标题: 缩放后坐标位置
lufy，您好：
我在做一个画板的功能，发现缩放画布后，触点坐标也随着发生了缩放变化，我想实现只缩放画布，但是触点还是相对于屏幕的坐标位置，不知道如何去转换呢？
项目演示地址：http://lufydemo.wxbuluo.com/#/drawingpad
代码仓库：https://github.com/ningbnii/ionic_lufy_demo/blob/master/www/controllers/drawingpad.js

作者: lufy 时间: 2020-2-10 08:31
你的鼠标事件是加在backgroundLayer上的啊，所以触点是相对于backgroundLayer来算的，而你缩放了drawingLayer，却依然用backgroundLayer的相对坐标，所以就怪怪的了

作者: ningbnii 时间: 2020-2-20 10:53
感谢lufy指点，我新加了两个层，drawingBackgroundLayerContainer，drawingBackgroundLayer，实现了想要的效果，不知道有没有更好的方法
function main(event) {
      LMultitouch.inputMode = LMultitouchInputMode.TOUCH_POINT;
      initBackgroundLayer();
      bitmapdata1 = new LBitmapData('#fff', 0, 0, w, h, LBitmapData.DATA_CANVAS);
      ctx = bitmapdata1._canvas.getContext('2d');
      ctx.lineJoin = ctx.lineCap = 'round';
      bitmap1 = new LBitmap(bitmapdata1);

      drawingBackgroundLayerContainer = new LSprite();
      drawingBackgroundLayerContainer.x = w;
      drawingBackgroundLayerContainer.y = h;
      backgroundLayer.addChild(drawingBackgroundLayerContainer);

drawingBackgroundLayer = new LSprite();
drawingBackgroundLayer.x = -w;
drawingBackgroundLayer.y = -h;
drawingBackgroundLayer.graphics.drawRect(1, '#ff0000', [-w/2, -h/2, 2*w, 2*h], true, '#4d4d4d');
drawingBackgroundLayerContainer.addChild(drawingBackgroundLayer);

      drawingLayer = new LSprite();
      drawingBackgroundLayer.addChild(drawingLayer);

      drawingLayer.x = -w/2;
      drawingLayer.y = -h/2;

      bitmap1.x = w/2;
      bitmap1.y = h/2;

      drawingLayer.addChild(bitmap1);

drawingBackgroundLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onMouseDown);
drawingBackgroundLayer.addEventListener(LMouseEvent.MOUSE_MOVE, onMouseMove);
drawingBackgroundLayer.addEventListener(LMouseEvent.MOUSE_UP, onMouseUp);

// 移动缩放监听backgroundLayer
backgroundLayer.addEventListener(LMouseEvent.MOUSE_DOWN,onBgMouseDown);
backgroundLayer.addEventListener(LMouseEvent.MOUSE_MOVE,onBgMouseMove);
backgroundLayer.addEventListener(LMouseEvent.MOUSE_UP,onBgMouseUp);
}

作者: lufy 时间: 2020-2-20 13:50

ningbnii 发表于 2020-2-20 10:53
感谢lufy指点，我新加了两个层，drawingBackgroundLayerContainer，drawingBackgroundLayer，实现了想要的 ...

我觉得这样分开处理挺好啊，硬把两个不同的处理在同一个监听里进行的话，反而更容易乱

欢迎光临 lufy's legend (http://lufylegend.com/forum/)