MooTools到jQuery与Canvas元素 [英] MooTools to jQuery with Canvas element

问题描述

我发现了一个JS小提琴，为我正在开发的项目提供一个完美的解决方案。不幸的是，在小提琴中选择的框架是MooTools。我在jQuery 1.9.1工作，当我切换框架到jQuery的小提琴休息。我试图改变一些我认为可能导致问题的东西，但没有运气。我希望有人对这两个框架有足够的熟悉，他们可以fork一个jQuery工作版本的这个...

I have found a JS Fiddle that provides a perfect solution for a project I am working on. Unfortunately the framework selected in the fiddle is MooTools. I am working in jQuery 1.9.1 and when I switch framework to jQuery the fiddle breaks. I have tried to change out a few of the things I thought might be causing the issue, but no luck. I'm hoping someone has enough familiarity with both frameworks that they could fork off a jQuery working version of this...

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

我以为可能有关变量如何引用id：

I thought it might be something in how the variable is referencing the id:

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

但我希望看到它像..

but I would expect to see it like..

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

这要比这更深，但那是我开始的。

It's got to be deeper than that, but that is were I started. I just don't have enough knowledge of Canvas and MooTools to know what to look for.

感谢您提供任何帮助！

推荐答案

你是第一部分的权利，它只需要更改选择器和mousemove事件处理程序。但是，对于这个例子中的动画作者使用MooTools Fx类，它是所有MooTools动画的基类，它的方法可以使用，而不需要绑定一个特定的元素和属性。

You're right for the first part, it only needs to change the selectors and the mousemove event handler. But, for the animation author in this example uses MooTools Fx class, it’s the base class for all MooTools animations and its methods can be used without the need to bound a particular element and properties to it.

另一方面，我不知道jQuery是否提供类似于MooTools Fx类的东西（这可能是我错了），jQuery使用 animate 方法为所有类型的动画，但必须有一个元素和一些CSS属性动画。

On the other hand, I do not know if jQuery offers something similar to the MooTools Fx class (it is possible that I'm wrong here), jQuery uses animate method for all sort of animations but there must be an element and some CSS properties that are animated.

一个解决方法是创建一个dummy元素，并启动动画与一些任意数值属性（作为宽度）。现在我们可以在画布上使用 step 函数（它在转换的每一步都被触发）。

One workaround is to create a dummy element and to start the animation with some arbitrary numerical property (as width). Now we can use step function (it is fired on every step of a transition) for our animation on canvas.

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示例使用默认情况下，未在jQuery中实现的 bounce：out 转换。其他jQuery缓动函数在 jQuery UI 库中提供，请访问下载网站，选择 Bounce Effect ，下载并打开该文件，找到并包括 jquery-ui-1.10.4.custom.min。 js 文件。

MooTools example uses a bounce:out transition that is not implemented in the jQuery by default. Additional jQuery easing functions are available in the jQuery UI library, go to download site, select Bounce Effect, download and open the file, find and include jquery-ui-1.10.4.custom.min.js file in your project.

这篇关于MooTools到jQuery与Canvas元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！