前端智勇大闯关-第二季-第一题

最新推荐文章于 2024-09-11 10:06:17 发布

weixin_34321753

最新推荐文章于 2024-09-11 10:06:17 发布

阅读量105

点赞数

文章标签：前端 ViewUI

新春之际，新朋友老朋友，祝大家新年快乐。哈哈，给大家拜个晚年。

UED 前端智勇大闯关-第二季（http://ued.taobao.com/quiz2/）

这里给出了第一的答案及实现原理，与大家探讨，可随便吐槽。
题目：请画一个三角形穿过4个点
画这个三角形，相对比较容易。如下图所示：

现在讨论的如何实现画板功能
1、准备画布（新标签canvas）
设置画布的宽高，为canvas设置属性width及height

var cs = document.getElementById("ktest");
var mcs = cs.getContext('2d');

2、画一条线段

obj.beginPath();
obj.moveTo(x1,y1);
obj.lineTo(x2,y2);
obj.strokeStyle = "#000000";
obj.stroke();
obj.closePath();

3、画圆形

obj.beginPath();
obj.arc(left,top,radius,0,360,false);
obj.fillStyle = "#FF0000";
obj.fill();
obj.closePath();

4、画线、画圆形

cs.onmousedown(e){
    //记录初始位置
    document.onmousemove = function(e){
        //记录移动位置
        //移动时，要清空画布，重新填充画布
    }
    document.onmouseup= function(e){
        //记录结束位置
    }
}

5、限制坐标的位置

x = e.clientX - cs.offsetLeft; //相对画布的水平位置
y = e.clientY - cs.offsetTop; //相对画布的垂直位置
if(x > csWidth){
   x = csWidth;  //csWidth画布的宽度
}
else if(x<0){
   x = 0;
}
if(y>csHeight){
   y = csHeight;  //csHeight画布的高度
}
else if(y <0 ){
   y = 0;
}

6、直线公式，熟悉吧，亲切吧，是不是想起来初高中学的几何了，还有。。。

//没啥说的，套公式。画直线
var A1 = y2 - y1;
var B1 = x1 - x2;
var C1 = y1*(x2 - x1) -x1*(y2 - y1);
A1*x + B1*y + C1 = 0

7、圆心到直线的距离，等于半径时相切一个交点，小于半径时相交两个交点，大于半径时相离零个交点。大概是这个意思，熟悉吧、亲切吧，是不是想起来初高中学的几何了，还有。。。

//没啥说的，套公式
(Math.abs(A1*50+B1*50+C1)/Math.sqrt(A1*A1+B1*B1))<radius) ||
((Math.abs(A2*50+B2*50+C2)/Math.sqrt(A2*A2+B2*B2))<radius)||
((Math.abs(A3*50+B3*50+C3)/Math.sqrt(A3*A3+B3*B3))<radius)

下图所示能满足上面的判断条件，实际上并没有全部穿过四个圆

8、追加判断，上面的是直线，而三角形是线段组成

(x1<60||x2<60||x3<60)&&(x1>140||x2>140||x3>140)&&
(y1<60||y2<60||y3<60)&&(y1>140||y2>140||y3>140)

示例：

<!DOCTYPE html> <html> <head> <title>前端智勇大闯关-第二季-第一题-www.cnblogs.com/kuikui</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div style="border:1px solid #000;width:400px;height:400px;background: #FFF;color:#000;"> <canvas id="ktest" width="400px" height="400px" style="background: #FFF;position: relative;">请用IE9+，firefox，chrome等浏览器</canvas> </div> <script> (function(){ window.onload = function(){ var cs = document.getElementById("ktest"); var mcs = cs.getContext('2d'); var csWidth = cs.clientWidth; var csHeight = cs.clientHeight; var radius = 10; var status = 0; var x1 = null; var y1 = null; var x2 = null; var y2 = null; var x3 = null; var y3 = null; function circle(obj,params){ params.l=params.l?params.l:0; params.t=params.t?params.t:0; obj.beginPath(); obj.arc(params.l,params.t,radius,0,360,false); obj.fillStyle = "#FF0000"; obj.fill(); obj.closePath(); } function line(obj,params){ params.x1 = params.x1?params.x1:0; params.y1 = params.y1?params.y1:0; params.x2 = params.x2?params.x2:0; params.y2 = params.y2?params.y2:0; obj.beginPath(); obj.moveTo(params.x1,params.y1); obj.lineTo(params.x2,params.y2); obj.strokeStyle = "#000000"; obj.stroke(); obj.closePath(); } function limitWH(e){ x = e.clientX - cs.offsetLeft; y = e.clientY - cs.offsetTop; if(x > csWidth){ x = csWidth; } else if(x<0){ x = 0; } if(y>csHeight){ y = csHeight; } else if(y <0 ){ y = 0; } return {"x":x,"y":y}; } function createCircle(){ circle(mcs,{"l":50,"t":50}); circle(mcs,{"l":150,"t":50}); circle(mcs,{"l":50,"t":150}); circle(mcs,{"l":150,"t":150}); } createCircle(); cs.onmousedown = function(e){ e = e || window.event; status++; if(1===status){ x1 = e.layerX; y1 = e.layerY; document.onmousemove = function(e){ e = e || window.event; mcs.clearRect(0,0,csWidth,csHeight); createCircle(); var tmpx = limitWH(e).x; var tmpy = limitWH(e).y; line(mcs,{"x1":x1,"y1":y1,"x2":tmpx,"y2":tmpy}); }; document.οnmοuseup= function(e){ e=e||window.event; x2 = limitWH(e).x; y2 = limitWH(e).y; document.onmousemove = null; document.onmouseup = null; }; } if(status===2){ document.onmousemove = function(e){ e = e || window.event; x3 = limitWH(e).x; y3 = limitWH(e).y; mcs.clearRect(0,0,csWidth,csHeight); createCircle(); line(mcs,{"x1":x1,"y1":y1,"x2":x2,"y2":y2}); line(mcs,{"x1":x1,"y1":y1,"x2":x3,"y2":y3}); line(mcs,{"x1":x2,"y1":y2,"x2":x3,"y2":y3}); }; document.οnmοuseup= function(e){ e=e||window.event; document.onmousemove = null; document.onmouseup = null; var isok1 = false,isok2 = false,isok3 = false,isok4 = false,isok5 = false; var A1 = y2 - y1; var B1 = x1 - x2; var C1 = y1*(x2 - x1) -x1*(y2 - y1); var A2 = y3 - y2; var B2 = x2 - x3; var C2 = y2*(x3 - x2) - x2*(y3 - y2); var A3 = y1 - y3; var B3 = x3 - x1; var C3 = y3*(x1 - x3) - x3*(y1 - y3); if(((Math.abs(A1*50+B1*50+C1)/Math.sqrt(A1*A1+B1*B1))<radius) ||((Math.abs(A2*50+B2*50+C2)/Math.sqrt(A2*A2+B2*B2))<radius)||((Math.abs(A3*50+B3*50+C3)/Math.sqrt(A3*A3+B3*B3))<radius)){ isok1 = true; } if(((Math.abs(A1*150+B1*50+C1)/Math.sqrt(A1*A1+B1*B1))<radius) ||((Math.abs(A2*150+B2*50+C2)/Math.sqrt(A2*A2+B2*B2))<radius)||((Math.abs(A3*150+B3*50+C3)/Math.sqrt(A3*A3+B3*B3))<radius)){ isok2 = true; } if(((Math.abs(A1*50+B1*150+C1)/Math.sqrt(A1*A1+B1*B1))<radius) ||((Math.abs(A2*50+B2*150+C2)/Math.sqrt(A2*A2+B2*B2))<radius)||((Math.abs(A3*50+B3*150+C3)/Math.sqrt(A3*A3+B3*B3))<radius)){ isok3 = true; } if(((Math.abs(A1*150+B1*150+C1)/Math.sqrt(A1*A1+B1*B1))<radius) ||((Math.abs(A2*150+B2*150+C2)/Math.sqrt(A2*A2+B2*B2))<radius)||((Math.abs(A3*150+B3*150+C3)/Math.sqrt(A3*A3+B3*B3))<radius)){ isok4 = true; } if((x1<60||x2<60||x3<60)&&(x1>140||x2>140||x3>140)&&(y1<60||y2<60||y3<60)&&(y1>140||y2>140||y3>140)){ isok5 = true; } if(isok1 && isok2 && isok3 && isok4 && isok5){ alert("太棒了！"); } else{ alert("抱歉，请重试..."); } status = 0; mcs.clearRect(0,0,csWidth,csHeight); createCircle(); }; } } } })(); </script> </body> </html>

运行代码