1.简介
今天宏哥分享的在实际测试工作中很少遇到，比较生僻，如果突然遇到我们可能会脑大、懵逼，一时之间不知道怎么办？所以宏哥这里提供一种思路供大家学习和参考。
2.SVG简介
svg也是html5新增的一个标签，它跟canvas很相似。都可以实现绘图、动画。但是svg绘制出来的都是矢量图，不像canvas是以像素为单位的，放大会模糊。svg绘制出来的图是不会的。SVG英文全称为Scalable vector Graphics，意思为可缩放的矢量图，这种元素比较特殊，需要通过 name() 函数来进行定位。
3.SVG元素拖拽
3.1svg拖拽demo
1.svg下的circle元素是可以拖动的，宏哥网上找了半天没有找到，然后自己动手写一个demo用于演示（可以看到circle的cx和cy在拖拽的过程中不断的发生变化），如下图所示：
2.demo的参考代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>北京-宏哥</title> <style> svg { margin-left: 100px; margin-top: 100px; border: 1px solid black } </style> </head> <body> <svg width="500" height="300" id="svg-container"> <circle cx="100" cy="100" r="20" fill="blue" id="draggable-circle"></circle> </svg> </body> <script> // 获取SVG容器和可拖拽元素 const svgContainer = document.getElementById('svg-container'); const draggableElement = document.getElementById('draggable-circle'); let isDragging = false; let startX, startY; // 鼠标按下事件处理程序 function dragStart(event) { isDragging = true; startX = event.clientX - parseInt(draggableElement.getAttribute('cx')), startY = event.clientY - parseInt(draggableElement.getAttribute('cy')); // 阻止默认的拖拽行为 event.preventDefault(); } // 鼠标移动事件处理程序 function drag(event) { if (isDragging) { const dx = event.clientX - startX; const dy = event.clientY - startY; draggableElement.setAttribute('cx', dx); draggableElement.setAttribute('cy', dy); } } // 鼠标抬起事件处理程序 function dragEnd(event) { isDragging = false; } // 添加事件监听器 draggableElement.addEventListener('mousedown', dragStart); svgContainer.addEventListener('mousemove', drag); svgContainer.addEventListener('mouseup', dragEnd); </script> </html>
3.接下来我们用上边的svg的demo来演示拖拽，其实在我们上一篇中掌握如何定位svg元素后，拖拽就非常简单了，无非就是一些鼠标的操作事件罢了。
3.2代码设计
3.3参考代码
#coding=utf-8🔥#1.先设置编码，utf-8可支持中英文，如上，一般放在第一行#2.注释：包括记录创建时间，创建人，项目名称。'''Created on 2024-05-27@author: 北京-宏哥公众号：北京宏哥（微信搜索：北京宏哥，关注宏哥，提前解锁更多测试干货！）Project:《最新出炉》系列初窥篇-Python+Playwright自动化测试-64 - Canvas和SVG元素推拽'''#3.导入模块fromplaywright.sync_apiimport Playwright, sync_playwright, expectdef run(playwright: Playwright) -> None: browser = playwright.chromium.launch(headless=False) context = browser.new_context() page = context.new_page() page.goto("C:/Users/Administrator/Desktop/svg.html") page.wait_for_timeout(1000)#svg元素定位 circle = page.locator('//*[name()="svg"]/*[name()="circle"]')print(circle.bounding_box()) box =circle.bounding_box()#svg元素拖拽page.mouse.move(x=box['x'] + box['width'] / 2, y=box['y'] + box['height'] / 2) page.mouse.down() page.mouse.move(x=box['x'] + box['width'] / 2 + 100, y=box['y'] + box['height'] / 2) page.mouse.up() page.wait_for_timeout(5000) page.close() context.close() browser.close()with sync_playwright() as playwright: run(playwright)
3.4运行代码
1.运行代码，右键Run'Test'，就可以看到控制台输出，如下图所示：
2.运行代码后电脑端的浏览器的动作(l蓝色的圆圈被拖走了)。如下图所示：
4.canvas元素拖拽
4.1canvas拖拽demo
1.canvas下的元素是可以拖动的，宏哥网上找了半天没有找到，然后自己动手写一个demo用于演示（可以看到circle的style在拖拽的过程中不断的发生变化），如下图所示：
2.demo的参考代码：
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>北京-宏哥</title><style>canvas{border: 1px solid black }</style></head><body></body><script> const canvas =document.createElement('canvas') canvas.width =400canvas.height=400canvas.id='canvas' document.body.appendChild(canvas) let ctx =canvas.getContext('2d')//画笔//状态标志 const statusConfig = { IDLE: 0,//DRAGSTART:1,//鼠标按下DRAGGING:2//托拽中}//画布信息 const canvasInfo = { status: statusConfig.IDLE, //状态dragTarget:null,//拖拽对象 lastEvtPos: { //前一位置x:null, y: null }, offsetEvtPos: { //前一偏移x:null, y: null } } let circles =[]//存储画的圆//画圆 const drawCircle = (ctx, cx, cy, r) => { ctx.save() ctx.beginPath() //开始画 ctx.arc(cx, cy, r, 0, Math.PI *2) ctx.strokeStyle ='pink'ctx.fillStyle='pink'ctx.stroke()//描边模式 ctx.fill() ctx.closePath() //结束 ctx.restore() } drawCircle(ctx, 100,100,10)//存储圆的位置 circles.push({ x: 100, y: 100, r: 10 }) drawCircle(ctx, 200,150,20) circles.push({ x: 200, y: 150, r: 20})// 元素拖拽 鼠标的画布坐标 const getCanvasPostion =e=>{return { x: e.offsetX, //鼠标在页面中的位置的同时减去canvas元素本身的偏移量 y: e.offsetY, } } //两点之间的距离 const getInstance = (p1, p2) =>{// 指数运算符 **，它们分别对 (p1.x - p2.x) 和 (p1.y - p2.y) 进行自乘。returnMath.sqrt((p1.x-p2.x)**2+(p1.y-p2.y)**2)//或者// Math.pow 函数，它用于计算指定数字的指定次方。// return Math.sqrt(Math.pow((p1.x - p2.x), 2) + Math.pow((p1.y - p2.y), 2))}//判断鼠标是否在圆内 const ifInCirlce =(pos)=>{for (let i =0; i < circles.length; i++) { if (getInstance(circles[i], pos) < circles[i].r) { return circles[i] } } returnfalse}//鼠标按下监听canvas.addEventListener('mousedown', e => { const canvasPostion = getCanvasPostion(e) const circleRef =ifInCirlce(canvasPostion)if (circleRef) { console.log(circleRef); canvasInfo.dragTarget =circleRef//拖拽对象canvasInfo.status= statusConfig.DRAGSTART canvasInfo.lastEvtPos = canvasPostion canvasInfo.offsetEvtPos = canvasPostion } }) //鼠标移动canvas.addEventListener('mousemove', e => { const canvasPostion = getCanvasPostion(e) const {dragTarget} =canvasInfoif (ifInCirlce(canvasPostion)) { canvas.style.cursor ='all-scroll'}else { canvas.style.cursor =''}if(!dragTarget)returnif(canvasInfo.status===statusConfig.DRAGSTART&& getInstance(canvasPostion, canvasInfo.lastEvtPos) >5) { console.log('try to drag'); canvasInfo.status = statusConfig.DRAGGING canvasInfo.offsetEvtPos = canvasPostion }elseif(canvasInfo.status=== statusConfig.DRAGGING){ console.log('draging'); dragTarget.x +=(canvasPostion.x- canvasInfo.offsetEvtPos.x) dragTarget.y +=(canvasPostion.y-canvasInfo.offsetEvtPos.y)//基于偏移ctx.clearRect(0,0, canvas.width, canvas.height) //清空画布circles.forEach(c=> drawCircle(ctx, c.x, c.y, c.r)) canvasInfo.offsetEvtPos = canvasPostion } }) canvas.addEventListener('mouseup', e => { canvasInfo.status = statusConfig.IDLE }) canvas.addEventListener('mouseleave', e => { canvasInfo.status = statusConfig.IDLE canvas.style.cursor =''})</script></html>
3.接下来我们用上边的canvas的demo来演示拖拽，同理：其实在我们上一篇中掌握如何定位canvas元素后，拖拽就非常简单了，无非就是一些鼠标的操作事件罢了。然而却在实践过程中发现并不简单，虽然可以定位到但是操作不了。宏哥觉得原因可能是canvas定位到是整个一块画布，而其上边的圆圈是通过绘画出来的，无法定位所以就无法操作了。而且按F2查看元素确实没有圆圈的元素。如下图所示：
5.小结
今天主要讲解和分享了SVG元素的定位和拖拽，实践过程中发现canvas无法拖拽，有可以实现拖拽的小伙伴或者童鞋们可以给宏哥留言哈，大家一起学习进步。好了，今天时间也不早了，宏哥就讲解和分享到这里，感谢您耐心的阅读，希望对您有所帮助。