热门标签
热门文章
- 1Unity制作消消乐游戏_unity 消除
- 2Oracle GoldenGate 详解
- 3【Pygame实战】好“球”推荐——“足”出精彩，追“球”健康，足不出户在家也能“踢足球”啦~_鈿解毥
- 4AI安全综述_人工智能安全 综述
- 5数据存储与容灾（第2版）主编 鲁先志 武春岭综合训练答案_数据存储与容灾第二版课后答案
- 6vue和uniapp的网络请求封装_uniapp vue3 接口请求封装 js
- 7基于UDP的可靠传输协议QUIC协议
- 8Android Studio软件的下载教程_android studio怎么下载
- 9Android library引用AAR_android library aar
- 10基于vue实现移动端点击上方导航，内容滑动切换，滑动内容导航自动切换。_vue slidechangetransitionstart
当前位置: article > 正文
canvas画图，画矩形、圆形、直线可拖拽移动,可拖拽更改尺寸大小_canvas移动形状
作者：从前慢现在也慢 | 2024-04-05 19:23:05
赞
踩
canvas移动形状
提示：canvas画图，画矩形，圆形，直线，曲线可拖拽移动
前言
一、画矩形，圆形，直线，曲线可拖拽移动
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas跟随鼠标移动画透明线</title> <style> div,canvas,img{ user-select: none; } .my_canvas,.bg_img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cf{ content: ''; display: block; overflow: hidden; clear: both; } .fl{ float: left; } .fr{ float: right; } .bg_img{ width: 674px; height: 495px; background: #ddd; } .img_tools{ position: absolute; top: 20px; left: 50%; transform: translateX(-50%); border: 1px solid #eee; border-radius: 64px; height: 64px; line-height: 64px; box-sizing: border-box; padding: 15px 20px 0; } .img_tool{ height: 32px; line-height: 32px; color: #000; font-size: 14px; text-align: center; width: 80px; border: 1px solid #ddd; border-radius: 32px; margin-right: 10px; cursor: pointer; position: relative; } .img_tool_active{ color: #409EFF; border: 1px solid #409EFF; } .show_history{ position: absolute; bottom:0; left: 50%; transform: translateX(-50%); } .show_history>img{ width: 120px; margin-right: 10px; border: 1px solid #eee; border-radius: 4px; } .canvas_text{ width: 120px; height: 32px; line-height: 32px; position: absolute; top: 0; left: 0; border: 1px solid #c0c0c0; border-radius: 4px; font-size: 16px; outline: none; background: none; display: none; font-family: Arial, Helvetica, sans-serif; padding-left: 0; letter-spacing: 0; } </style> </head> <body> <div class="bg_img"></div> <canvas id="myCanvasBot" class="my_canvas" width="674" height="495"></canvas> <canvas id="myCanvasTop" class="my_canvas" width="674" height="495"></canvas> <div class="img_tools cf"> <div class="img_tool fl" onclick="changeType('curve',this)">涂鸦</div> <div class="img_tool fl" onclick="changeType('line',this)">直线</div> <div class="img_tool fl img_tool_active" onclick="changeType('rect',this)">矩形</div> <div class="img_tool fl" onclick="changeType('ellipse',this)">圆形</div> <!-- <div class="img_tool fl" onclick="changeType('eraser',this)">橡皮擦</div> --> <!-- <div class="img_tool fl" onclick="changeType('text',this)">文字</div> --> <!-- <div class="img_tool fl" onclick="changeType('revoke',this)">撤销</div> --> <!-- <div class="img_tool fl" onclick="changeType('restore',this)">恢复</div> --> </div> <input id="canvasText" autofocus class="canvas_text" type="text"> <div id="showHistory" class="show_history"></div> <script> const canvasWidth = 674; const canvasHeight = 495; //底层canvas const botCan = document.getElementById('myCanvasBot'); //顶层canvas const topCan = document.getElementById('myCanvasTop'); //底层画布 const botCtx = botCan.getContext('2d'); //顶层画布 const topCtx = topCan.getContext('2d'); //鼠标是否按下 是否移动 let isDown = false,isMove = false; //鼠标是否在canvas上抬起 let isCanUp = false; //需要画图的轨迹 let drawPoints = []; //起始点x,y let startPoint = { x:0, y:0 }; //图片历史 let historyList = []; //空历史 historyList.push(new Image()) //当前绘画历史index let historyIndex = -1; //icon历史 // let partHistory = []; //操作类型 let drawType = 'rect'; //画线宽度 const lineWidth = 10; //文字大小 const fontSize = 16; //画线颜色 let strokeStyle = 'rgba(255,0,0,0.6)'; //path2D图形列表 let pathList = []; //path2D单个图形 let pathObj = null; //path2D的唯一标识 let pathId = 0; //当前被激活的path2D let activePath = null; //是否为拖拽行为 let isDrag = false; //拖拽是否移动 let isDragMove = false; //是否为改变尺寸行为 isResize = false; //改变尺寸点list let pointsList = []; //拖拽修改尺寸的点 let activePoint = null; //resize是否移动 let isResizeMove = false; //改变尺寸点 let resizePath = null; //改变尺寸点List let resizePointList = []; //文字输入框init const canvasText = document.getElementById('canvasText'); canvasText.style.display = 'none'; canvasText.style.lineHeight = '32px'; canvasText.style.height = '32px'; canvasText.style.display = 'none'; canvasText.style.color = 'none'; canvasText.addEventListener('blur',()=>{ topCtx.font = fontSize + 'px Arial, Helvetica, sans-serif'; let h = parseFloat(canvasText.style.height); topCtx.fillText(canvasText.value, startPoint.x+1, startPoint.y+h/2+fontSize/2-1); canvasText.style.display = 'none'; canvasText.value = ''; topToBot(); }) //起始点x,y let textPoint = { x:0, y:0 }; //鼠标按下 const mousedown = (e)=>{ isDown = true; let x = (e||window.event).offsetX; let y = (e||window.event).offsetY; if(canvasText.style.display == 'none')startPoint = {x,y}; //检查是否点击到resize的点 activePoint = isResizePointInPath(x,y); if(activePoint){ isResize = true; activePath = activePoint.activePath;//原有path,需要清除 //可resize，清除resize点 topCtx.clearRect(0,0,canvasWidth,canvasHeight); switch (activePoint.type){ case 'rect': makePathActive(); break; case 'ellipse': makePathActive(); break; case 'line': makePathActive(); break; } return } //检测是否点击到图形 activePath = isPointInPath(x,y); if(activePath){ createResizePoint(activePath); //只有点击到图形的时候，才添加图形resize的点 isDrag = true; topCtx.strokeStyle = topCtx.fillStyle = botCtx.strokeStyle = botCtx.fillStyle = activePath.strokeStyle||strokeStyle; topCtx.lineWidth = botCtx.lineWidth = activePath.lineWidth||lineWidth; topCtx.clearRect(0,0,canvasWidth,canvasHeight); switch (activePath.type){ case 'rect': makePathActive(); break; case 'ellipse': makePathActive(); break; case 'line': makePathActive(); break; case 'curve': makePathActive(); break; } return; } if(drawType == 'text'){ textPoint = { x:x+topCan.offsetLeft-canvasWidth/2, y:y+topCan.offsetTop-canvasHeight/2 }; // canvasText.style.height = 32 + 'px'; canvasText.style.top = textPoint.y+'px'; canvasText.style.left = textPoint.x+'px'; canvasText.style.display = 'block'; canvasText.style.fontSize = fontSize + 'px'; canvasText.style.color = strokeStyle; setTimeout(()=>{ canvasText.focus(); },100) } if(drawType == 'curve'){ drawPoints = []; drawPoints.push({x,y}); } topCtx.strokeStyle = topCtx.fillStyle = botCtx.strokeStyle = botCtx.fillStyle = strokeStyle; topCtx.lineWidth = botCtx.lineWidth = lineWidth; topCtx.lineCap = topCtx.lineJoin = botCtx.lineCap = botCtx.lineJoin = 'round'; } //鼠标移动 const mousemove = (e)=>{ let x = (e||window.event).offsetX; let y = (e||window.event).offsetY; let distanceX = 0; let distanceY = 0; if(isDown){ isMove = true; if(isResize){ isResizeMove = true; if(activePoint&&activePoint.resizeFun){ activePoint.resizeFun(x,y); } return } if(isDrag){ isDragMove = true; switch(activePath.type){ case 'curve': distanceX = x - startPoint.x; distanceY = y - startPoint.y; let newPoints = []; for(let i=0;i<activePath.drawPoints.length;i++){ let drawPoint = activePath.drawPoints[i]; newPoints.push({x:drawPoint.x + distanceX,y:drawPoint.y + distanceY}); } drawCurve(newPoints); break; case 'line': distanceX = x - startPoint.x; distanceY = y - startPoint.y; drawLine(activePath.startX + distanceX,activePath.startY + distanceY,activePath.x + distanceX,activePath.y + distanceY,); break; case 'eraser': // drawEraser(x,y); break; case 'rect': // xy 为当前point的坐标 // startPoint为点击的矩形上点 查看当前point.x点距离startPoint.x移动了多少 point.y点距离startPoint.y移动了多少 drawRect(activePath.x + (x - startPoint.x),activePath.y + (y - startPoint.y),activePath.width,activePath.height); break; case 'ellipse': // drawEllipse(x,y); drawEllipse(activePath.x + (x - startPoint.x),activePath.y + (y - startPoint.y),activePath.radiusX,activePath.radiusY); break; } return; } switch(drawType){ case 'curve': drawPoints.push({x,y}); drawCurve(drawPoints); break; case 'line': drawLine(startPoint.x,startPoint.y,x,y); break; case 'eraser': drawEraser(x,y); break; case 'rect': // drawRect(x,y); drawRect(startPoint.x, startPoint.y, x-startPoint.x, y - startPoint.y); break; case 'ellipse': drawEllipse((x+startPoint.x)/2, (y+startPoint.y)/2, Math.abs((x-startPoint.x)/2), Math.abs((y-startPoint.y)/2),0,0, Math.PI*2,true); break; } } } //鼠标抬起 const mouseup = (e)=>{ isCanUp = true; if(isDown){ isDown = false; // topCan内容画到botCan上 if(isResize){ isResize = false; activePath = null; resizePointList = []; if(isResizeMove){ isResizeMove = false; pathList.pop(); }else{ pathObj = pathList.pop(); } topToBot(); return; } if(isDrag){ isDrag = false; activePath = null; if(isDragMove){ isDragMove = false; pathList.pop(); }else{ pathObj = pathList.pop(); } topToBot(); return } if(drawType!='text')topToBot(); } } //topCan内容画到botCan上 const topToBot = ()=>{ if(pathObj){ pathObj.id = pathId++; pathList.push(pathObj); topCtx.clearRect(0,0,canvasWidth,canvasHeight); if(isCanUp)isCanUp=false; botCtx[pathObj.shape](pathObj.path); //如果有resizePoints if(pathObj.points&&pathObj.points.length>0){ drawResizePoint(pathObj.points); } pathObj.points = []; pathObj = null; } drawPoints = []; isDown = false; isMove = false; } //判断是否点击到图形 const isPointInPath = (x,y)=>{ let PointInPath = null; for(let i=0;i<pathList.length;i++){ let path = pathList[i]; if(botCtx.isPointInStroke(path.path,x,y)){ PointInPath = path; break; } } return PointInPath; } //判断是否点击到图形 const isResizePointInPath = (x,y)=>{ let point = null; for(let i=0;i<resizePointList.length;i++){ let resizePoint = resizePointList[i]; if(botCtx.isPointInStroke(resizePoint.path,x,y)){ point = resizePoint; break; } } return point; } //激活rect图形轮廓 botCtx删除activePath topCtx添加activePath const makePathActive = ()=>{ botCtx.clearRect(0,0,canvasWidth,canvasHeight); let arr = []; for(let i=0;i<pathList.length;i++){ let path = pathList[i] if(activePath.id != path.id){ botCtx[path.shape](path.path); arr.push(path); }else{ topCtx.strokeStyle = path.strokeStyle; topCtx[path.shape](path.path); //创建可拖动的点 } } arr.push(activePath); pathList = arr; } //创建resize的点 const createResizePoint = ()=>{ activePath.points = []; let ponitFillStyle = 'rgba(0,0,0,0.8)'; let pointWidth = 10; let pointHeight = 10; switch(activePath.type){ case 'rect': activePath.points = [ { x:activePath.x-pointWidth/2, y:activePath.y-pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:0,activePath:activePath, //用于删除原activePath resizeFun:(x,y)=>{ drawRect(x,y,activePath.x + activePath.width-x,activePath.y + activePath.height-y); }, }, { x:activePath.x+activePath.width/2-pointWidth/2, y:activePath.y-pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:1,activePath:activePath, resizeFun:(x,y)=>{ drawRect(activePath.x,y,activePath.width,activePath.height+activePath.y-y); } }, { x:activePath.x+activePath.width-pointWidth/2, y:activePath.y-pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:2,activePath:activePath, resizeFun:(x,y)=>{drawRect(activePath.x, y ,x-activePath.x, activePath.height+ activePath.y - y);} }, { x:activePath.x+activePath.width-pointWidth/2, y:activePath.y+activePath.height/2-pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:3,activePath:activePath, resizeFun:(x,y)=>{ drawRect(activePath.x, activePath.y ,x-activePath.x, activePath.height); } }, { x:activePath.x+activePath.width-pointWidth/2, y:activePath.y+activePath.height-pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:4,activePath:activePath, resizeFun:(x,y)=>{ drawRect(activePath.x, activePath.y ,x-activePath.x, y-activePath.y); } }, { x:activePath.x+activePath.width/2-pointWidth/2, y:activePath.y+activePath.height-pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:5,activePath:activePath, resizeFun:(x,y)=>{ drawRect(activePath.x, activePath.y ,activePath.width, y-activePath.y); } }, { x:activePath.x-pointWidth/2, y:activePath.y+activePath.height-pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:6,activePath:activePath, resizeFun:(x,y)=>{ drawRect(x, activePath.y ,activePath.x-x+activePath.width, y-activePath.y); } }, { x:activePath.x-pointWidth/2, y:activePath.y+activePath.height/2-pointHeight/2, width:10,height:10,ponitFillStyle, type:activePath.type,id:7,activePath:activePath, resizeFun:(x,y)=>{ drawRect(x, activePath.y ,activePath.x-x+activePath.width, activePath.height); } }, ]; // drawResizePoint( activePath.points); break; case 'ellipse': activePath.points = [ { x:activePath.x - pointWidth/2, y:activePath.y - activePath.radiusY - pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:0,activePath:activePath, resizeFun:(x,y)=>{drawEllipse(activePath.x,activePath.y,activePath.radiusX,Math.abs(y-activePath.y));}, }, { x:activePath.x + activePath.radiusX - pointWidth/2, y:activePath.y - pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:0,activePath:activePath, resizeFun:(x,y)=>{drawEllipse(activePath.x,activePath.y,Math.abs(x - activePath.x),activePath.radiusY);}, }, { x:activePath.x - pointWidth/2, y:activePath.y + activePath.radiusY - pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:0,activePath:activePath, resizeFun:(x,y)=>{drawEllipse(activePath.x,activePath.y,activePath.radiusX,Math.abs(y-activePath.y));}, }, { x:activePath.x - activePath.radiusX - pointWidth/2, y:activePath.y - pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:0,activePath:activePath, resizeFun:(x,y)=>{drawEllipse(activePath.x,activePath.y,Math.abs(x - activePath.x),activePath.radiusY);}, }, ] // drawResizePoint( activePath.points); break; case 'line': activePath.points = [ { x:activePath.startX - pointWidth/2, y:activePath.startY - pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:0,activePath:activePath, resizeFun:(x,y)=>{drawLine(x,y,activePath.x,activePath.y);}, }, { x:activePath.x - pointWidth/2, y:activePath.y - pointHeight/2, width:10,height:10,ponitFillStyle,type:activePath.type,id:0,activePath:activePath, resizeFun:(x,y)=>{drawLine(activePath.startX,activePath.startY,x,y);}, } ] // drawResizePoint( activePath.points); break; } drawResizePoint( activePath.points); } //画resize的点 const drawResizePoint = (points)=>{ resizePointList = []; for(let i=0;i<points.length;i++){ let resizePoint = points[i]; let path = new Path2D(); topCtx.beginPath(); topCtx.moveTo(resizePoint.x,resizePoint.y); path.rect(resizePoint.x,resizePoint.y,resizePoint.width,resizePoint.height); topCtx.strokeStyle = resizePoint.ponitFillStyle; topCtx.stroke(path); resizePoint.path = path; resizePointList.push(resizePoint) } } //画椭圆形 const drawEllipse = (x,y,radiusX,radiusY)=>{ pathObj = null; //清除topCtx画布 topCtx.clearRect(0,0,canvasWidth,canvasHeight); topCtx.beginPath(); let path = new Path2D(); // 椭圆 path.ellipse(x,y,radiusX,radiusY,0,0, Math.PI*2,true); topCtx.strokeStyle = strokeStyle; topCtx.stroke(path); pathObj = { type:'ellipse', shape:'stroke', path, x, y, radiusX, radiusY, lineWidth:topCtx.lineWidth||lineWidth, strokeStyle:topCtx.strokeStyle||strokeStyle, points:[], }; } //画矩形 const drawRect = (x,y,width,height)=>{ pathObj = null; //清除topCtx画布 topCtx.clearRect(0,0,canvasWidth,canvasHeight); topCtx.beginPath(); let path = new Path2D(); // 矩形 //这里需要确认起始点和结束点 //即 不管画出的矩形是向上，向下 左上角点为起始点，做下角点为结束点 let beginX = width<0?x+width:x; let beginY = height<0?y+height:y path.rect(beginX,beginY,Math.abs(width),Math.abs(height)); topCtx.strokeStyle = strokeStyle; topCtx.stroke(path); pathObj = { type:'rect', shape:'stroke', path, x:beginX, y:beginY, width:Math.abs(width), height:Math.abs(height), lineWidth:topCtx.lineWidth||lineWidth, strokeStyle:topCtx.strokeStyle||strokeStyle, points:[], }; } //橡皮擦 const drawEraser = (x,y)=>{ //橡皮擦圆形半径 const radius = lineWidth/2; botCtx.beginPath(); for(let i=0;i<radius*2;i++){ //勾股定理高h let h = Math.abs( radius - i); //i>radius h = i-radius; i<radius h = radius - i //勾股定理l let l = Math.sqrt(radius*radius -h*h); //矩形高度 let rectHeight = 1; //矩形宽度 let rectWidth = 2*l; //矩形X let rectX = x-l; //矩形Y let rectY = y-radius + i; botCtx.clearRect(rectX, rectY, rectWidth, rectHeight); } } //画透明度直线 const drawLine = (startX,startY,x,y)=>{ if(!isDown)return; pathObj = null; //清空当前画布内容 topCtx.clearRect(0,0,canvasWidth,canvasHeight); //必须每次都beginPath 不然会卡 topCtx.beginPath(); let path = new Path2D(); path.moveTo(startX,startY); path.lineTo(x,y); topCtx.strokeStyle = strokeStyle; topCtx.stroke(path); pathObj = { type:'line', shape:'stroke', path, x, y, startX, startY, lineWidth:topCtx.lineWidth||lineWidth, strokeStyle:topCtx.strokeStyle||strokeStyle, points:[], }; } //画带透明度涂鸦 const drawCurve = (drawPointsParams)=>{ // drawPoints.push({x,y}); if(!drawPointsParams||drawPointsParams.length<1)return pathObj = null; //清空当前画布内容 topCtx.clearRect(0,0,canvasWidth,canvasHeight); //必须每次都beginPath 不然会卡 topCtx.beginPath(); let path = new Path2D(); path.moveTo(drawPointsParams[0].x,drawPointsParams[0].y); for(let i=1;i<drawPointsParams.length;i++){ path.lineTo(drawPointsParams[i].x,drawPointsParams[i].y); } topCtx.strokeStyle = strokeStyle; topCtx.stroke(path); pathObj = { type:'curve', shape:'stroke', path, drawPoints:drawPointsParams, lineWidth:topCtx.lineWidth||lineWidth, strokeStyle:topCtx.strokeStyle||strokeStyle }; } //切换操作 const changeType = (type,that)=>{ // if(drawType == type) return; let tools = document.getElementsByClassName('img_tool'); for(let i=0;i<tools.length;i++){ let ele = tools[i]; if(ele.classList.contains('img_tool_active'))ele.classList.remove('img_tool_active'); } that.classList.add('img_tool_active'); drawType = type; //撤销 if(drawType == 'revoke'){ if(historyIndex>0){ historyIndex--; drawImage(historyList[historyIndex]); } //恢复 }else if(drawType == 'restore'){ if(historyIndex<historyList.length - 1){ historyIndex++; drawImage(historyList[historyIndex]); } } } const drawImage = (img)=>{ botCtx.clearRect(0,0,canvasWidth,canvasHeight); botCtx.drawImage(img,0,0); } //canvas添加鼠标事件 topCan.addEventListener('mousedown',mousedown); topCan.addEventListener('mousemove',mousemove); topCan.addEventListener('mouseup',mouseup); //全局添加鼠标抬起事件 document.addEventListener('mouseup',(e)=>{ let x = (e||window.event).offsetX; let y = (e||window.event).offsetY; let classList = (e.target || {}).classList || []; if(classList.contains('img_tool'))return; if(!isCanUp){ isDown = false; // topCan内容画到botCan上 if(isDrag){ isDrag = false; activePath = null; if(isDragMove){ isDragMove = false; pathList.pop(); }else{ pathObj = pathList.pop(); } topToBot(); return } if(drawType == 'line'&&!isDrag){ let clientX = topCan.getBoundingClientRect().x; let clientY = topCan.getBoundingClientRect().y; drawLine(startPoint.x,startPoint.y,x-clientX,y-clientY); } // topCan内容画到botCan上 topToBot(); } }); //全局添加鼠标移动事件 document.addEventListener('mousemove',(e)=>{ if(isMove)return isMove = false; let x = (e||window.event).offsetX; let y = (e||window.event).offsetY; if(drawType == 'line'&&!isDrag){ let clientX = topCan.getBoundingClientRect().x; let clientY = topCan.getBoundingClientRect().y; drawLine(startPoint.x,startPoint.y,x-clientX,y-clientY); } }); </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
- 669
- 670
- 671
- 672
- 673
- 674
- 675
- 676
- 677
- 678
- 679
- 680
- 681
- 682
- 683
- 684
- 685
- 686
- 687
- 688
- 689
- 690
- 691
- 692
- 693
- 694
- 695
- 696
- 697
- 698
- 699
- 700
- 701
- 702
- 703
- 704
- 705
- 706
- 707
- 708
- 709
- 710
- 711
- 712
- 713
- 714
- 715
- 716
- 717
- 718
- 719
- 720
- 721
- 722
- 723
- 724
- 725
- 726
- 727
- 728
- 729
- 730
- 731
- 732
- 733
- 734
- 735
- 736
- 737
- 738
- 739
- 740
- 741
- 742
- 743
- 744
- 745
- 746
- 747
- 748
- 749
- 750
- 751
- 752
- 753
- 754
- 755
- 756
- 757
- 758
- 759
- 760
- 761
- 762
- 763
- 764
- 765
- 766
- 767
- 768
- 769
总结
踩坑路漫漫长@~@
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/367540
推荐阅读
相关标签
