canvas拖动图片

<!DOCTYPE HTML>
<html>
        <head>
            <link rel="stylesheet" type="text/css" href="/demo/base.css">
                <meta charset="utf-8" />
                <title>简单的HTML5 Canvas拖动效果 - HTML51.COM</title>


                <script type="text/javascript">


                        var mainCanvas;
                        var mainCt;
                        var MAIN_CANVAS_WIDTH=680;
                        var MAIN_CANVAS_HEIGHT=560;
                        var currentRectX=100;
                        var currentRectY=100;
                        var startDragRectX=0;
                        var startDragRectY=0;
                        var startDragMouseX=0;
                        var startDragMouseY=0;
                        var RECT_WIDTH=100;
                        var RECT_HEIGHT=100;


                        function pageInit(){
                                mainCanvas=document.createElement("canvas");
                                mainCanvas.width=MAIN_CANVAS_WIDTH;
                                mainCanvas.height=MAIN_CANVAS_HEIGHT;
                                document.body.appendChild(mainCanvas);
                                mainCanvas.onmousedown=canvasMouseDownHandler;
                                mainCanvas.onmouseup=canvasMouseUpHandler;


                                mainCt=mainCanvas.getContext("2d");
                                redrawRect();
                        }


                        function canvasMouseDownHandler(event){
                                var canvasMouseX=event.layerX;
                                if(!canvasMouseX){
                                        canvasMouseX=event.x;
                                }
                                var canvasMouseY=event.layerY;
                                if(!canvasMouseY){
                                        canvasMouseY=event.y;
                                }


                                if(canvasMouseX>currentRectX&&canvasMouseX<currentRectX+RECT_WIDTH&&canvasMouseY>currentRectY&&canvasMouseY<currentRectY+RECT_HEIGHT){
                                        mainCanvas.onmousemove=canvasMouseMoveHandler;


                                        startDragMouseX=canvasMouseX;
                                        startDragMouseY=canvasMouseY;
                                        startDragRectX=currentRectX;
                                        startDragRectY=currentRectY;
                                }
                        }


                        function canvasMouseMoveHandler(event){
                                var canvasMouseX=event.layerX;
                                if(!canvasMouseX){
                                        canvasMouseX=event.x;
                                }
                                var canvasMouseY=event.layerY;
                                if(!canvasMouseY){
                                        canvasMouseY=event.y;
                                }


                                currentRectX=startDragRectX+canvasMouseX-startDragMouseX;
                                currentRectY=startDragRectY+canvasMouseY-startDragMouseY;
                                redrawRect();
                        }


                        function canvasMouseUpHandler(event){
                                mainCanvas.onmousemove=null;
                        }


                        function redrawRect(){
                                mainCt.clearRect(0,0,MAIN_CANVAS_WIDTH,MAIN_CANVAS_HEIGHT);
                                mainCt.fillStyle="#0000FF";
                                mainCt.fillRect(currentRectX,currentRectY,RECT_WIDTH,RECT_HEIGHT);
                        }


                </script>
        </head>
        <body onload="pageInit();">
        <script src="/demo/page.js"></script>
        </body>
</html>
微信小程序中的Canvas API提供了一种在页面上绘制图形的功能,但它本身并不支持直接拖动图片。然而,你可以通过结合`wx.createSelectorQuery()`、`getBoundingClientRect()`等API以及事件监听机制模拟实现图片拖动效果。 以下是一个简单的步骤描述: 1. **获取元素**:首先,你需要在一个合适的容器内放置图片,并获取该图片元素,通常使用`querySelector()`方法。 ```javascript var image = wx.createSelectorQuery().select('#your-image-id').fields({ node: true, size: true }).exec()[0]; ``` 2. **添加触摸事件监听**:在图片元素上添加touchstart、touchmove和touchend事件处理函数,用于跟踪触摸位置和响应移动。 ```javascript image.addEventListener('touchstart', function(e) { var touch = e.touches[0]; // 获取触点信息 startX = touch.pageX; startY = touch.pageY; }); image.addEventListener('touchmove', function(e) { var touch = e.touches[0]; var dx = touch.pageX - startX; // 已经移动的距离 var dy = touch.pageY - startY; // 根据dx和dy更新图片的位置 image.style.transform = `translate(${dx}px, ${dy}px)`; }); ``` 3. **防止默认行为**:为了阻止图片直接跟随手指移动,需要取消`touchmove`事件的默认行为: ```javascript e.preventDefault(); ``` 4. **结束操作**:当用户松开屏幕时,可以清除移动并添加停止事件处理函数。 ```javascript image.addEventListener('touchend', function() { // 当用户释放触摸时,还原图片到初始位置或设置新的停止位置 }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值