Javascript 如何将Kinteic.js中的以下代码转换为函数？

我有一个代码，它画一个圆角十六进制，当鼠标移到它上面和外面时，它会放大和缩小。如何使代码模块化和可重用，如何将其转化为函数？特别是十六进制绘图代码

    <script src="js/kinetic.min.js" charset="utf-8"></script>
    <script defer="defer" type="text/javascript">
        function zoomHex() {
        }
        var stage = new Kinetic.Stage({
            container: 'container',
            width: 1024,
            height: 800
        });
        var shapesLayer = new Kinetic.Layer();
        var hex = new Kinetic.Shape({
            x: 5,
            y: 10,
            fill: 'rgb(53, 74, 159)',
            // a Kinetic.Canvas renderer is passed into the drawFunc function
            drawFunc: function(canvas) {
                var context = canvas.getContext();
                context.beginPath();
                context.moveTo(0.1, 51.9);
                context.bezierCurveTo(0.1, 43.6, 4.6, 35.8, 11.9, 31.6);
                context.lineTo(61.0, 3.3);
                context.bezierCurveTo(68.2, -0.9, 77.2, -0.9, 84.4, 3.3);
                context.lineTo(133.6, 31.6);
                context.bezierCurveTo(140.8, 35.8, 145.3, 43.6, 145.3, 52.0);
                context.lineTo(145.3, 108.7);
                context.bezierCurveTo(145.3, 117.1, 140.8, 124.8, 133.6, 129.0);
                context.lineTo(84.4, 157.4);
                context.bezierCurveTo(77.2, 161.5, 68.2, 161.5, 61.0, 157.4);
                context.lineTo(11.9, 129.0);
                context.bezierCurveTo(4.6, 124.8, 0.1, 117.0, 0.1, 108.7);
                context.lineTo(0.1, 51.9);
                context.closePath();
                canvas.fillStroke(this);
            }
        });
        var zoomIn = new Kinetic.Animation(function(frame) {
            var period = 2500;
            var duration = 250;
            zoomAmount = 1;
            var scale =frame.time / period;
            hex.setScale(frame.time / period + zoomAmount);
            if(frame.time > duration) {
                zoomIn.stop();
                this.frame.time = 0;
            }
        }, shapesLayer);
        var zoomOut = new Kinetic.Animation(function(frame) {
            var period = 2500;
            var duration = 250;
            zoomAmount = 1;
            hex.setScale(zoomAmount - frame.time / period + 0.102);
            if(frame.time > duration) {
                zoomOut.stop();
                this.frame.time = 0;
            }
        }, shapesLayer);
        hex.on('mouseover', function() {
            zoomIn.start();
            //zoomIn.stop();
        });
        hex.on('mouseleave', function() {
            zoomOut.start();
            //zoomOut.stop();
        });
        shapesLayer.add(hex);
        stage.add(shapesLayer);
    </script>

函数zoomHex（）{
}
var阶段=新的动力学阶段({
容器：'容器'，
宽度：1024，
身高：800
});
var shapesLayer=新的dynamic.Layer（）；
var hex=新的动力学形状({
x:5，
y:10，
填写：'rgb（53、74、159）'，
//将动能.Canvas渲染器传递到drawFunc函数中
drawFunc:函数（画布）{
var context=canvas.getContext（）；
context.beginPath（）；
上下文。移动到（0.1,51.9）；
贝塞尔曲线图（0.1,43.6,4.6,35.8,11.9,31.6）；
上下文。lineTo（61.0,3.3）；
贝塞尔曲线图（68.2，-0.9,77.2，-0.9,84.4,3.3）；
上下文。lineTo（133.6,31.6）；
贝塞尔曲线图（140.8,35.8,145.3,43.6,145.3,52.0）；
lineTo（145.3108.7）；
贝塞尔曲线图（145.3117.1144.8124.8133.6129.0）；
上下文。lineTo（84.4157.4）；
贝塞尔曲线图（77.2161.5,68.2161.5,61.0157.4）；
lineTo（11.9129.0）；
贝塞尔曲线图（4.6124.8,0.1117.0,0.1108.7）；
上下文。lineTo（0.1,51.9）；
closePath（）；
canvas.fillStroke（这个）；
}
});
var zoomIn=新的动能动画（函数（帧）{
var周期=2500；
var持续时间=250；
zoomAmount=1；
var刻度=帧时间/周期；
十六进制设置刻度（帧时间/周期+缩放计数）；
如果（帧时间>持续时间）{
zoomIn.stop（）；
this.frame.time=0；
}
}，造型层）；
var zoomOut=新的动能.动画（函数（帧）{
var周期=2500；
var持续时间=250；
zoomAmount=1；
十六进制设置刻度（zoomAmount-frame.time/period+0.102）；
如果（帧时间>持续时间）{
zoomOut.stop（）；
this.frame.time=0；
}
}，造型层）；
hex.on（'mouseover'，function（）{
zoomIn.start（）；
//zoomIn.stop（）；
});
hex.on（'mouseleave'，function（）{
zoomOut.start（）；
//zoomOut.stop（）；
});
shapesLayer.add（十六进制）；
stage.add（shapesLayer）；

您想使用KineticJS的扩展功能：

Kinetic.Util.extend（Kinetic.customShape，Kinetic.Shape）

例如：

    (function() {
        Kinetic.customHex = function(config) {
            this._initHex(config);
        };

        Kinetic.MyCircle.prototype = {
            _initHex: function(config) {
                Kinetic.Shape.call(this, config);
            },
            drawFunc: function() {
            },
            customFunc : function() {
            }
        };

      Kinetic.Util.extend(Kinetic.customHex, Kinetic.Shape);
    })();

---

有关如何扩展

Kinetic.Shape

对象的示例，请参阅“直接搜索”和“向上搜索任何动力学形状”（矩形、圆形等）。

要使用KineticJS的扩展功能：

Kinetic.Util.extend（Kinetic.customShape，Kinetic.Shape）

例如：

    (function() {
        Kinetic.customHex = function(config) {
            this._initHex(config);
        };

        Kinetic.MyCircle.prototype = {
            _initHex: function(config) {
                Kinetic.Shape.call(this, config);
            },
            drawFunc: function() {
            },
            customFunc : function() {
            }
        };

      Kinetic.Util.extend(Kinetic.customHex, Kinetic.Shape);
    })();

---

有关如何扩展

dynamic.Shape

对象的示例，请参阅直接搜索任何动力学图形（rect、circle等）。

您可以使用上下文轻松重用十六进制图形坐标。translate。

下面是一个小提琴的例子：

translate（x，y）将导致下一个图形开始，就像[x，y]是[0,0]坐标一样

这样你就不必调整你的十六进制坐标来在不同的位置使用它们

方法：

• 首先，使用context.save以未翻译状态保存上下文
• 然后，context.translate（165,10）将图形原点移动到[165,10]
• 然后画十六进制（使用相同的不变直线/曲线坐标）
• 最后，使用contex.restore将上下文返回到其未翻译状态

此代码在[165,10]处绘制十六进制，而不更改任何十六进制坐标：

drawFunc: function(canvas) {
    var context = canvas.getContext();
    context.save();
    context.translate(165,10);
    context.beginPath();
    context.moveTo(0.1, 51.9);
    context.bezierCurveTo(0.1, 43.6, 4.6, 35.8, 11.9, 31.6);
    context.lineTo(61.0, 3.3);
    context.bezierCurveTo(68.2, -0.9, 77.2, -0.9, 84.4, 3.3);
    context.lineTo(133.6, 31.6);
    context.bezierCurveTo(140.8, 35.8, 145.3, 43.6, 145.3, 52.0);
    context.lineTo(145.3, 108.7);
    context.bezierCurveTo(145.3, 117.1, 140.8, 124.8, 133.6, 129.0);
    context.lineTo(84.4, 157.4);
    context.bezierCurveTo(77.2, 161.5, 68.2, 161.5, 61.0, 157.4);
    context.lineTo(11.9, 129.0);
    context.bezierCurveTo(4.6, 124.8, 0.1, 117.0, 0.1, 108.7);
    context.lineTo(0.1, 51.9);
    context.closePath();
    canvas.fillStroke(this);
    context.restore();
}   

下面的代码将十六进制代码包装到模板函数中，这样您就可以重复调用该函数来创建所需数量的十六进制

缩放代码也封装在包装器函数中，因此所有的十六进制数都可以缩放

下面是代码和小提琴：

原型
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：400px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：400
});
var layer=新的动能层（）；
阶段。添加（层）；
//使用函数创建多个十六进制
var-hexes=[]；
六角推（makeHex（5,10，'rgb（53,74,159）'）；
推（makeHex（165,10，'skyblue'））；
推（makeHex（5175，'gold'）；
hexes.push（makeHex（165175，'MediumAquamarine'）；
//做一个十六进制
函数makeHex（x，y，fill）{
var hex=新的动力学形状({
x:0,，
y:0，
填充：填充，
//将动能.Canvas渲染器传递到drawFunc函数中
drawFunc:函数（画布）{
var context=canvas.getContext（）；
context.save（）；
语境。翻译（x，y）；
context.beginPath（）；
上下文。移动到（0.1,51.9）；
贝塞尔曲线图（0.1,43.6,4.6,35.8,11.9,31.6）；
上下文。lineTo（61.0,3.3）；
贝塞尔曲线图（68.2，-0.9,77.2，-0.9,84.4,3.3）；
上下文。lineTo（133.6,31.6）；
贝塞尔曲线图（140.8,35.8,145.3,43.6,145.3,52.0）；
lineTo（145.3108.7）；
贝塞尔曲线图（145.3117.1144.8124.8133.6129.0）；
上下文。lineTo（84.4157.4）；
context.bezierCur