MooTools для jQuery с элементом Canvas

Question

MooTools для jQuery с элементом Canvas

0

Я нашел JS Fiddle, который обеспечивает идеальное решение для проекта, над которым я работаю. К сожалению, рамки, выбранные в скрипке, - MooTools. Я работаю в jQuery 1.9.1, и когда я переключаю фреймворк на jQuery, скрипт прерывается. Я попытался изменить некоторые вещи, которые, как я думал, может вызвать проблему, но не повезло. Я надеюсь, что у кого-то есть достаточное знакомство с обоими фреймворками, которые они могут разблокировать из рабочей версии jQuery этого...

http://jsfiddle.net/oskar/Aapn8/

Я думал, что это может быть что-то в том, как переменная ссылается на id:

var range = document.id('range');

но я бы ожидал увидеть это как..

var range = document.getElementById('range');

Это должно быть глубже, но это было, когда я начал. Мне просто не хватает знаний о Canvas и MooTools, чтобы знать, что искать.

Заранее благодарю за любую помощь!

Archetype 20 фев. 2014, в 07:09

Источник

0

Эта скрипка использует Moo.FX, а в jQuery ее нет. Что вы можете сделать, так это добавить MooTools на свою страницу. После сценария jQuery добавьте Mootools. Или используйте только MooTools, и мы поможем вам конвертировать ваш jQuery :)
Sergio 20 фев. 2014, в 08:38
1

Это дубликат: stackoverflow.com/questions/21952749/…
Sergio 22 фев. 2014, в 10:56

Теги:

javascript

jquery

canvas

mootools

1 ответ

Ещё вопросы

Эта скрипка использует Moo.FX, а в jQuery ее нет. Что вы можете сделать, так это добавить MooTools на свою страницу. После сценария jQuery добавьте Mootools. Или используйте только MooTools, и мы поможем вам конвертировать ваш jQuery :)
Это дубликат: stackoverflow.com/questions/21952749/…

Danijel · Accepted Answer · 2014-03-14T16-46-00.000Z

Вы правы для первой части, ей нужно только изменить селектор и обработчик события mousemove. Но для автора анимации в этом примере используется класс MooTools Fx, его базовый класс для всех анимаций MooTools и его методы могут использоваться без необходимости привязывать к нему определенный элемент и свойства.

С другой стороны, я не знаю, предлагает ли jQuery нечто похожее на класс MooTools Fx (возможно, что я здесь не так), jQuery использует метод animate для всех видов анимаций, но должен существовать элемент и некоторые свойства CSS которые анимированы.

Одним из способов является создание фиктивного элемента и запуск анимации с помощью некоторого произвольного численного свойства (в виде ширины). Теперь мы можем использовать функцию step (она запускается на каждом шаге перехода) для нашей анимации на холсте.

jQuery(function ($) {

    var range = $('#range');
    var bg = $('#counter').get( 0 );
    var ctx = bg.getContext('2d');
    var imd = null;
    var circ = Math.PI * 2;
    var quart = Math.PI / 2;

    ctx.beginPath();
    ctx.strokeStyle = '#99CC33';
    ctx.lineCap = 'square';
    ctx.closePath();
    ctx.fill();
    ctx.lineWidth = 10.0;

    imd = ctx.getImageData(0, 0, 240, 240);

    var draw = function( current ) {
        ctx.putImageData(imd, 0, 0);
        ctx.beginPath();
        ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false);
        ctx.stroke();
    }

    range.on( 'mousemove', function() {
        draw(this.value / 100);     
    });

    $('<div />').animate({ width: 100 }, {
        duration: 2000, 
        easing: "easeOutBounce",
        step: function( now ) {
            draw( now / 100 );
            range.val( now );
        }
    });

});

FIDDLE

Заметка:

В примере MooTools используется переход bounce:out который по умолчанию не реализован в jQuery. Дополнительные функции jQuery easing доступны в библиотеке jQuery UI, перейдите на сайт загрузки, выберите Bounce Effect, загрузите и откройте файл, найдите и jquery-ui-1.10.4.custom.min.js файл jquery-ui-1.10.4.custom.min.js в свой проект.