1

我为 Android 等 Pattern 登录创建了 HTML5 版本，但不幸的是，我对 HTML5 了解不多，无法提供所需的功能。

我怎么能用鼠标做到这一点？

我的项目是这样的：http: //jsfiddle.net/atiruz/mvkv9/3/

var size = 3; // Dimensions -> 3x3.
var ancho = size * 82 + 10;
var alto = ancho;
var drawingCanvas = createCanvas(document.getElementById('canvas'), 600, 600);
var context = drawingCanvas.context;

context.beginPath();
CrearContenedor(context,0,0,ancho,alto,15);
for (var i = 1; i <= size; i++) {
    for (var j = 1; j <= size; j++) {
        CrearBoton(context, i * 80 - 32, j * 80 - 32, ancho, alto);
    }
}

结果是：

在此处输入图像描述

4

2 回答 2

3

这是一个非常基本的（仅限 webkit）画布实现：http: //jsfiddle.net/ChfGh/1/

我正在使用 jQuery 进行事件处理，但这并不是绝对必要的。

var can = $("#canvas")[0],
    ctx = can.getContext('2d'),
    wid = can.width,
    hei = can.height,
    pad = 20,
    circles = [],
    selCircs = [],
    correctPath = [0,3,7,5,2],
    startPoint = {
        x: 0,
        y: 0
    },
    dragging = false;

(function init() {
    var rad = (wid - pad * 4) / 3;

    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            circles.push(new Circle({
                x: j * (pad + rad) + pad + rad / 2,
                y: i * (pad + rad) + pad + rad / 2
            }, rad / 2));
        }
    }
})();
(function draw() {
    ctx.clearRect(0, 0, wid, hei);

    for (var i = 0; i < circles.length; i++) {
        circles[i].draw(ctx);
    }

    if (dragging && selCircs.length > 1) {
        var pos = selCircs[0].circ.position();
        ctx.beginPath();
        ctx.lineWidth = 10;
        ctx.strokeStyle = "#000";
        ctx.moveTo(pos.x, pos.y);
        for (var j = 1; j < selCircs.length; j++){
            pos = selCircs[j].circ.position();
            ctx.lineTo(pos.x,pos.y);
        }
        ctx.stroke();
    }
    webkitRequestAnimationFrame(draw);
})();

function Circle(center, radius, fill, stroke, hover, active) {
    var center = {
        x: center.x,
        y: center.y
    },
        radius = radius,
        fill = fill || '#ccc',
        hover = hover || '#ddd',
        active = active || '#0f0',
        stroke = stroke || '',
        path;
    this.position = function(){
        return {x:center.x, y:center.y};
    }
    this.draw = function(ctx) {
        ctx.fillStyle = this.selected ? active : this.hovering ? hover : fill;
        if (stroke) ctx.strokeStyle = stroke;

        ctx.beginPath();
        ctx.arc(center.x, center.y, radius, 0, Math.PI * 2, false);
        ctx.fill();
        if (stroke) ctx.stroke();
    };

    this.isPointInPath = function(x, y) {
        return Math.sqrt(Math.pow(center.x - x, 2) + Math.pow(center.y - y, 2)) <= radius;
    };
    this.hovering = false;
    this.selected = false;
}

$("#canvas").mousemove(function(e) {
    for (var i = 0; i < circles.length; i++) {
        var cir = circles[i];
        var pip = cir.isPointInPath(e.offsetX, e.offsetY);
        cir.hovering = pip;
        if (dragging && pip && !cir.selected) {
            selCircs.push({circ:cir, index:i});
            cir.selected = true;
        }
    }
});
$("#canvas").mousedown(function(e) {
    dragging = true;
});
$("#canvas").mouseup(function(e) {
    dragging = false;
    // validate path
    if (selCircs.length == correctPath.length){
        var valid = true;
        for (var i = 0; valid && i < correctPath.length; i++){
            var index = correctPath[i];
            if (selCircs[i].index !== index) valid = false;
        }
        if (valid) alert('correct!');
    }

    // reset selection
    for (var i = 0; i < selCircs.length; i++)
        selCircs[i].circ.selected = false;

    selCircs = [];
});​

这是我最终为了好玩而实现的风格：http: //jsfiddle.net/ChfGh/6/

您可以使用map从选定的圆圈中提取索引：

var path = selCircs.map(function(ele){
    return ele.index;
}).join(" "); // " " if you want a space between, otherwise ""

它将为您提供输入的字符串表示形式。

于 2012-10-25T20:53:34.850 回答
1

在http://pagoenka.github.io/签出“模式锁定”jquery 插件

于 2015-02-06T08:11:56.203 回答