Невозможно добавить слой на холст, используя jCanvas - PullRequest
Новая
       23

Невозможно добавить слой на холст, используя jCanvas

1 голос
/ 05 декабря 2011

Я использую jCanvas для рисования на элементе HTML canvas.Сначала я инициализирую таблицу ax * x, в которой каждая ячейка содержит холст: 

function init(size) {
            // Adding the board table to the body
            $("#content").append("<table class=\"board\">");

            for(i=0; i<size; i++) {
                $(".board").append("<tr>")
                for(j=0; j<size ; j++) {
                    $(".board tr:last-child").append("<td class=\"square\">");
                }
            }
            // Setting size to match width or height, whichever i smallest
            var h = $("#content").height();
            var w = $("#content").width();
            var rez = (w > h) ? h : w;
            var cSize = rez / size;
            $(".board td").append("<canvas width="+cSize+" height="+cSize+" />");
            $(".board").css("width",rez);
            $(".board").css("height",rez);

            // Drawing icons on the board
            var c = $("canvas");
            var icns = new Array(11);
            for(i=0; i<11; i++)
                icns[i] = "svg/"+ params["hvor"] +"/"+ (i+1) +".svg";

            for(i=0; i<c.length; i++) {
                var rand = Math.floor(Math.random()*(icns.length-1));
                var icn = icns[rand];
                icns.splice($.inArray(icns[rand], icns), 1);
                $(c[i]).drawImage({
                    source: icn,
                    height: cSize,
                    fromCenter: false
                });
            }
        }

Это прекрасно работает, и изображения выводятся на холст.Затем я пытаюсь добавить слой с новой формой (он должен быть удален позже, поэтому я использую слой). 

$('td').click(function(){
    var h = $(this).height() -2;
var o = h / 3.5;
var t = h / 10;

$(this).children("canvas").addLayer({
    method: "drawLine",
    strokeStyle: "#5cfe15",
    strokeWidth: t,
    x1: o, y1: o*2,
    x2: h/2, y2: h-o,
    x3: o*3, y3: o-t
});
});

Вот тогда я получаю ошибку Uncaught TypeError: Object [object Object] has no method 'addLayer'.если я просто использую drawLine() вместо addLayer(), он фактически рисует линию, поэтому объект явно является канвой.

Что мне здесь не хватает?

1 Ответ

2 голосов
/ 21 декабря 2011

Убедитесь, что вы используете jCanvas v5.0, поскольку он представил метод addLayer () для коллекций jQuery (то есть $ .fn).

-Caleb

...