缩放后坐标位置

ningbnii

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

lufy

你的鼠标事件是加在backgroundLayer上的啊，所以触点是相对于backgroundLayer来算的，而你缩放了drawingLayer，却依然用backgroundLayer的相对坐标，所以就怪怪的了

ningbnii

感谢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

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

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