0

我有这段代码，它绘制一个圆角十六进制，并在鼠标悬停时放大和缩小。如何使代码模块化和可重用，如何将其变成函数？特别是十六进制绘图代码？

    <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>
4

2 回答 2

2

您可以使用 context.translate 轻松重用您的 Hex 绘图坐标。

这是一个示例小提琴：http: //jsfiddle.net/m1erickson/J7Zce/

在此处输入图像描述

context.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();
}

以下代码将您的十六进制包装在模板函数中，以便您可以重复调用该函数来创建所需数量的十六进制。

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

这是代码和小提琴：http: //jsfiddle.net/m1erickson/J7Zce/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    // use a function to create multiple hexes
    var hexes=[];
    hexes.push(makeHex(5,10,'rgb(53, 74, 159)'));
    hexes.push(makeHex(165,10,'skyblue'));
    hexes.push(makeHex(5,175,'gold'));
    hexes.push(makeHex(165,175,'MediumAquamarine'));

    // make 1 hex
    function makeHex(x,y,fill){
        var hex = new Kinetic.Shape({
            x: 0,
            y: 0,
            fill: fill,
            // a Kinetic.Canvas renderer is passed into the drawFunc function
            drawFunc: function(canvas) {
                var context = canvas.getContext();
                context.save();
                context.translate(x,y);
                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();
            }
        });
        hex.on('mouseover', function() {
            this.zoomIn.start();
            //zoomIn.stop();
        });
        hex.on('mouseleave', function() {
            this.zoomOut.start();
            //zoomOut.stop();
        });
        //
        hex.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) {
                    hex.zoomIn.stop();
                    this.frame.time = 0;
                }
            }, layer);
        hex.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) {
                    hex.zoomOut.stop();
                    this.frame.time = 0;
                }
            }, layer);

        layer.add(hex);

        layer.draw();
    }


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>
于 2013-09-09T17:32:34.797 回答
1

您想使用 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);
    })();

请参阅直接KineticJS 源并搜索任何 Kinetic Shape（矩形、圆形等）以获取有关如何Kinetic.Shape扩展对象的示例。

于 2013-09-09T14:33:58.033 回答