1

我想使用 KineticJS 在网格中绘制一组复杂的形状。我的形状是 80 宽和 150 高。当我画它们时，形状之间有一个间隙，即形状的宽度/高度——我希望它们在一个紧密的网格中相互对接，而不是分开。

看起来我以某种方式以应有的 x/y 两倍绘制每个形状。

我已将我的问题简化为附加代码。我的形状很复杂，但为了保持代码简单，我用矩形替换了我的形状（我知道我可以使用 Rect 对象来绘制矩形）。

当你运行这段代码时，你会看到 8 个矩形在水平和垂直方向上相隔很远；需要明确的是，我想要的是每个矩形都紧紧地对接在一起。

我使用常量 width 和 height 来绘制函数 drawFunc 中的矩形，并定位矩形（在代码中，xPos = ((cols -1) * width)所以我会认为它们会相互紧贴。

代码非常简单。我遍历行和列，为我的形状创建一个drawFunc，我使用绘图中的宽度/高度，然后我根据它的行/列使用相同的宽度/高度定位形状。所以它们应该彼此紧贴，而不是分开。

使困惑。

<!DOCTYPE HTML>
<html>
<head>
<style>

body {
    margin: 0px;
    padding: 0px;
}
</style>
<script src="http://www.kineticjs.com/download/kinetic-v3.9.8.js"></script>

<script>
    window.onload = drawKineticGrid;


    function drawKineticGrid() {

        var width = 80;
        var height = 150;

        var stage = new Kinetic.Stage({
            container : "container",
            width : 800,
            height : 600
        });

        var layer = new Kinetic.Layer();
        var messageLayer = new Kinetic.Layer();

        for (rows = 1; rows <= 2; rows++) {

            for (cols = 1; cols <= 4; cols++) {
                var aRect = new Kinetic.Shape({
                    name : "" + rows + ":" + cols,
                    drawFunc :    function() {

                        var context = this.getContext();
                        context.beginPath();

                        // Make a simple shape - my actual shape is more complex, but I'm
                        // writing a rectangle here to keep the code simple - I know I could use

                        // the KineticJS Rect class here instead.

                        context.moveTo(this.getX(), this.getY());
                        context.lineTo(this.getX() + width, this.getY());

                        context.lineTo(this.getX() + width, this.getY() + height);

                        context.lineTo(this.getX(), this.getY() + height);

                        context.lineTo(this.getX(), this.getY());

                        context.lineWidth = 2;
                        context.stroke();

                        this.fill();
                        this.stroke();

                        // Draw the X and Y, Row and Col values in the rectangle
                        context.fillText("x,y : " + this.getX() + ", " + this.getY(), this.getX() + 5, this.getY() + 15);

                        context.fillText("row, col : " + this.getName(), this.getX() + 5, this.getY() + 30);

                    },
                    fill : "#ffffff",
                    stroke : "green",
                    strokeWidth : 1
                });

                //add the  shape to the layer
                var xPos = ((cols - 1) * width);
                var yPos = ((rows - 1) * height);

                aRect.setX(xPos);
                aRect.setY(yPos);
                layer.add(aRect);
            }
        }

        // Add the layer to the stage
        stage.add(layer);
        stage.add(messageLayer);

    };

</script>
</head>
<body>
    <div id="container"></div>
</body>
</html>
4

2 回答 2

0

房祖名

请记住 draw() 方法发生在 setX() 方法之后；

在第一次迭代中，一切正常。

在第二次迭代中，当您执行 setX(80) 时，您的水平参考变为 80 像素，很好。

之后，您调用 moveTo(80, 0)，因此笔划定位在点 (160, 0) ---> / 80 + 80 /

等等。尝试以下操作：

<!DOCTYPE HTML>
<html>
<head>
<style>

body {
    margin: 0px;
    padding: 0px;
}
</style>
<script src="http://www.kineticjs.com/download/kinetic-v3.9.8.js"></script>

<script>
    window.onload = drawKineticGrid;


    function drawKineticGrid() {

        var width = 80;
        var height = 150;

        var stage = new Kinetic.Stage({
            container : "container",
            width : 800,
            height : 600
        });

        var layer = new Kinetic.Layer();
        var messageLayer = new Kinetic.Layer();

        for (rows = 1; rows <= 2; rows++) {

            for (cols = 1; cols <= 4; cols++) {
                var aRect = new Kinetic.Shape({
                    name : "" + rows + ":" + cols,
                    drawFunc :    function() {

                        var context = this.getContext();
                        context.beginPath();

                        // Make a simple shape - my actual shape is more complex, but I'm
                        // writing a rectangle here to keep the code simple - I know I could use

                        // the KineticJS Rect class here instead.

                        context.moveTo(0, 0);
                        context.lineTo(width, 0);

                        context.lineTo(width, height);

                        context.lineTo(0, height);

                        context.lineTo(0, 0);

                        context.lineWidth = 2;
                        context.stroke();

                        this.fill();
                        this.stroke();

                        // Draw the X and Y, Row and Col values in the rectangle
                        context.fillText("x,y : " + this.getX() + ", " + this.getY(), 5, 15);

                        context.fillText("row, col : " + this.getName(), 5, 30);

                    },
                    fill : "#ffffff",
                    stroke : "green",
                    strokeWidth : 1
                });

                //add the  shape to the layer
                var xPos = ((cols - 1) * width);
                var yPos = ((rows - 1) * height);

                aRect.setX(xPos);
                aRect.setY(yPos);
                layer.add(aRect);
            }
        }

        // Add the layer to the stage
        stage.add(layer);
        stage.add(messageLayer);

    };

</script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

干杯！！

于 2012-08-31T05:09:11.193 回答
0

drawFunc 中的坐标应该是相对的（相对于点 (getX(), getY())，而不是绝对的。例如，如果要绘制矩形，请使用

drawFunc: function(canvas){
    var context = canvas.getContext();
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(this.getWidth(), 0);
    context.lineTo(this.getWidth(), this.getHeight());
    context.lineTo(0, this.getHeight());
    context.closePath();
    canvas.fillStroke(this);
}
于 2013-07-30T20:18:38.837 回答