缩放后坐标位置
lufy,您好:我在做一个画板的功能,发现缩放画布后,触点坐标也随着发生了缩放变化,我想实现只缩放画布,但是触点还是相对于屏幕的坐标位置,不知道如何去转换呢?
项目演示地址:http://lufydemo.wxbuluo.com/#/drawingpad
代码仓库:https://github.com/ningbnii/ionic_lufy_demo/blob/master/www/controllers/drawingpad.js
你的鼠标事件是加在backgroundLayer上的啊,所以触点是相对于backgroundLayer来算的,而你缩放了drawingLayer,却依然用backgroundLayer的相对坐标,所以就怪怪的了 感谢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);
} ningbnii 发表于 2020-2-20 10:53 static/image/common/back.gif
感谢lufy指点,我新加了两个层,drawingBackgroundLayerContainer,drawingBackgroundLayer,实现了想要的 ...
我觉得这样分开处理挺好啊,硬把两个不同的处理在同一个监听里进行的话,反而更容易乱
页:
[1]