lufy's legend

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1090|回复: 3

缩放后坐标位置

[复制链接]

6

主题

1

好友

198

积分

士兵

Rank: 1

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

使用道具 举报

36

主题

7

好友

8910

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2020-2-10 08:31:53 |显示全部楼层
你的鼠标事件是加在backgroundLayer上的啊,所以触点是相对于backgroundLayer来算的,而你缩放了drawingLayer,却依然用backgroundLayer的相对坐标,所以就怪怪的了
不回答与技术和引擎不相关的问题
回复

使用道具 举报

6

主题

1

好友

198

积分

士兵

Rank: 1

发表于 2020-2-20 10:53:05 |显示全部楼层
感谢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);
    }
回复

使用道具 举报

36

主题

7

好友

8910

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2020-2-20 13:50:39 |显示全部楼层
ningbnii 发表于 2020-2-20 10:53
感谢lufy指点,我新加了两个层,drawingBackgroundLayerContainer,drawingBackgroundLayer,实现了想要的 ...

我觉得这样分开处理挺好啊,硬把两个不同的处理在同一个监听里进行的话,反而更容易乱
不回答与技术和引擎不相关的问题
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

防止垃圾广告,请填写任意字符

Archiver|lufy's legend

GMT+8, 2020-8-12 20:22 , Processed in 0.070532 second(s), 21 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部