MooTools jQuery与画布元素

我找到了一个JS小提琴，它为我正在研究的一个项目提供了一个完美的解决方案。不幸的是，在小提琴中选择的框架是MooTools。我正在jQuery 1.9.1中工作，当我将框架切换到jQuery时，小提琴会断开。我试图改变一些我认为可能导致问题的事情，但没有运气。我希望有人与他们可以关闭叉这个jQuery的工作版本两种框架不够熟悉...MooTools jQuery与画布元素

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

我想它可能是在变量的方式引用id：

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

，但我希望看到它像..

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

它有得比较深，但就是被我开始。我只是没有足够的关于Canvas和MooTools的知识来知道要寻找什么。

在此先感谢您的帮助！

来源

2014-02-20 Archetype

这个小提琴使用Moo.FX，jQuery没有它。你可以做的是在你的页面中添加MooTools。在jQuery脚本之后，添加Mootools。或者只使用MooTools，我们将帮助你在这里转换你的jQuery :) – Sergio

这是一个重复的：http://stackoverflow.com/questions/21952749/convert-this-mootools-code-into-jquery-code – Sergio

你对第一部分是正确的，它只需要改变选择器和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 UI库中提供额外的jQuery缓动功能，请访问download站点，选择Bounce Effect，下载并打开文件，在您的项目中查找并包含jquery-ui-1.10.4.custom.min.js文件。

来源

2014-03-14 19:20:10 Danijel

MooTools jQuery与画布元素

回答

相关问题