canvas七巧板

使用canvas简单编写七巧板

最近在学习canvas，目前还只是简单的了解了一下canvas画图的原理和简单图形的绘画。看到网上有很多canvas画的七巧板，但是并没有实现可以移动、拖拽和旋转拼接的demo，所以自己就利用js加上简单的canvas来实现一下。

---

原理

七巧板说白了也就是七块不同的多边形，要么是三角形，要么是四边形：如下图

我们可以通过数组现将七巧板的每一块先画出来：
//把7个点的位置坐标和颜色存入一个数组
var points = [
{p: [{x: 0, y: 0}, {x: 200, y: 0}, {x: 100, y: 100}], color: “#caff67”, click: false, drag: false, types: 3},
{p: [{x: 0, y: 0}, {x: 100, y: 100}, {x: 0, y: 200}], color: “#67becf”, click: false, drag: false, types: 3},
{
p: [{x: 200, y: 0}, {x: 200, y: 100}, {x: 150, y: 150}, {x: 150, y: 50}],
color: “#ef3d61”,
click: false,
drag: false,
types: 4
},
{
p: [{x: 150, y: 50}, {x: 150, y: 150}, {x: 100, y: 100}],
color: “#f9f51a”,
click: false,
drag: false,
types: 3
},
{
p: [{x: 100, y: 100}, {x: 150, y: 150}, {x: 100, y: 200}, {x: 50, y: 150}],
color: “#a594c0”,
click: false,
drag: false,
types: 4
},
{
p: [{x: 50, y: 150}, {x: 100, y: 200}, {x: 0, y: 200}],
color: “#fa8ecc”,
click: false,
drag: false,
types: 3
},
{
p: [{x: 200, y: 100}, {x: 200, y: 200}, {x: 100, y: 200}],
color: “#f6ca29”,
click: false,
drag: false,
types: 3
}
];
然后我们只需要根据鼠标事件来改变相应的图形坐标，然后进行重新渲染就行了。
鼠标的事件具体为：
canvas.onmousedown
canvas.onmouseup
canvas.onmouseout
canvas.onmousemove
canvas.ondblclick
我们需要对相应的事件作出相应的操作
其中双击实现角度变换是需要用到数学公式为（自己数学太差了，只能从网上找了）：
假设对图片上任意点(x,y)，绕一个坐标点(rx0,ry0)逆时针旋转a角度后的新的坐标设为(x0, y0)，有公式：

x0= (x - rx0)*cos(a) - (y - ry0)*sin(a) + rx0 ;

y0= (x - rx0)*sin(a) + (y - ry0)*cos(a) + ry0 ;

效果展示

鼠标按下后，即可对该模块进行拖拽。

对模块双击，即可对模块进行角度旋转，我这里是以图形的某一个点为参照点来旋转。
参照点和旋转角度可以自己设定。

代码

代码的实现很简单，主要是四个事件的处理函数，在代码中也已经很详细的添加了注释，很好理解

<div style="height: 100%;width: 100%;">
    <canvas id="canvas">
        <p>you brower is not support canvas</p>
    </canvas>

</div>

function draw() {
        // 清除画布，准备绘制
        context.clearRect(0, 0, canvas.width, canvas.height);
        //遍历数组，以每个点为起点画图
        for (var i = 0; i < points.length; i++) {
            context.beginPath();
            context.moveTo(points[i].p[0].x, points[i].p[0].y);
            for (var j = 0; j < points[i].p.length; j++) {
                context.lineTo(points[i].p[j].x, points[i].p[j].y);
            }
            context.lineTo(points[i].p[0].x, points[i].p[0].y);
            context.strokeStyle = "black";
            context.lineWidth = "3";
            context.fillStyle = points[i].color;
            context.stroke();
            context.fill();
            context.closePath();
        }
    }

    draw();
    var isDragging = false;

    function canvasClick(e) {
        // 取得画布上被单击的点
        var clickX = e.pageX - canvas.offsetLeft;
        var clickY = e.pageY - canvas.offsetTop;

        for (var i = 0; i < points.length; i++) {
            var flag = false;
            if (points[i].types == 3) {
                flag = anglecompult(points[i].p, clickX, clickY);
            } else if (points[i].types == 4) {
                flag = reactcompult(points[i].p, clickX, clickY);
            }
            if (flag == true) {
                isDragging = true;
                points[i].click = true;
                points[i].drag = true;
                select = i;
            } else {
                points[i].click = false;
                points[i].drag = false;
            }
        }

    }

    function dblik(e) {//双击一块转动45度角
        // 判断圆圈是否开始拖拽
        //if (isDragging == true) {
        // 判断拖拽对象是否存在

        // 取得鼠标位置
        var x = e.pageX - canvas.offsetLeft;
        var y = e.pageY - canvas.offsetTop;

        // 将圆圈移动到鼠标位置
        var changdu = points[select].p.length;

        var yuanX = points[select].p[0].x;
        var yuanY = points[select].p[0].y;

        var yuanX2 = points2[select].p[0].x;
        var yuanY2 = points2[select].p[0].y;
        var xianx;
        var xianx2;
        var xiany;
        var xiany2;
        var xiebian;
        for (var j = 1; j < changdu; j++) {
            xianx = (points[select].p[j].x - yuanX) * (Math.cos((2 * Math.PI / 360) * 45)) - (points[select].p[j].y - yuanY) * (Math.sin((2 * Math.PI / 360) * 45)) + yuanX;
            xiany = (points[select].p[j].x - yuanX) * (Math.sin((2 * Math.PI / 360) * 45)) + (points[select].p[j].y - yuanY) * (Math.cos((2 * Math.PI / 360) * 45)) + yuanY;
            points[select].p[j].x = xianx;
            points[select].p[j].y = xiany;

            xianx2 = (points2[select].p[j].x - yuanX2) * (Math.cos((2 * Math.PI / 360) * 45)) - (points2[select].p[j].y - yuanY2) * (Math.sin((2 * Math.PI / 360) * 45)) + yuanX2;
            xiany2 = (points2[select].p[j].x - yuanX2) * (Math.sin((2 * Math.PI / 360) * 45)) + (points2[select].p[j].y - yuanY2) * (Math.cos((2 * Math.PI / 360) * 45)) + yuanY2;
            points2[select].p[j].x = xianx2;
            points2[select].p[j].y = xiany2;
        }
        console.log(points[select].p);
        // 更新画布
        draw();

        //}
    }

    function drag(e) {
        // 判断圆圈是否开始拖拽
        if (isDragging == true) {
            // 判断拖拽对象是否存在

            // 取得鼠标位置
            var x = e.pageX - canvas.offsetLeft;
            var y = e.pageY - canvas.offsetTop;


            var changdu = points[select].p.length;

            var xx = x - points2[select].p[0].x;
            var yy = y - points2[select].p[0].y;
            for (var j = 0; j < changdu; j++) {//将图形拖动到鼠标相应位置
                points[select].p[j].x = points2[select].p[j].x + xx;
                points[select].p[j].y = points2[select].p[j].y + yy;
            }
            // 更新画布
            draw();

        }
    }

    function stopdrag() {
        isDragging = false;
    }

    function anglecompult(anglepostions, x, y) {//判断三角形内
        var first = anglepostions[0];
        var second = anglepostions[1];
        var third = anglepostions[2];

        var firstR = ((second.y - third.y) * (x - third.x) + (third.x - second.x) * (y - third.y)) / ((second.y - third.y) * (first.x - third.x) + (third.x - second.x) * (first.y - third.y));

        var secondR = ((third.y - first.y) * (x - third.x) + (first.x - third.x) * (y - third.y)) / ((second.y - third.y) * (first.x - third.x) + (third.x - second.x) * (first.y - third.y))

        var thirsR = 1 - firstR - secondR;

        if (firstR > 0 && firstR < 1 && secondR > 0 && secondR < 1 && thirsR > 0 && thirsR < 1) {
            return true;
        } else {
            return false;
        }
    }

    function reactcompult(reactpostions, x, y) {//判断鼠标是否在矩形区域内
        var xmin, xmax, ymin, ymax;
        xmin = xmax = reactpostions[0].x;
        ymin = ymax = reactpostions[0].y;
        for (var i = 0; i < reactpostions.length; i++) {
            if (reactpostions[i].x < xmin) {
                xmin = reactpostions[i].x;
            }
            if (reactpostions[i].x > xmax) {
                xmax = reactpostions[i].x;
            }
            if (reactpostions[i].y < ymin) {
                ymin = reactpostions[i].y;
            }
            if (reactpostions[i].y > ymax) {
                ymax = reactpostions[i].y;
            }
        }

        if (xmin < x && xmax > x && ymin < y && ymax > y) {
            return true;
        } else {
            return false;
        }
    }

总结

代码很简单，本人也是刚刚接触canvas，程序也有很多缺陷，主要是把自己理解的东西写出来而已，如果有错误的地方，希望大家能够指正。附上demo的地址