Question

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

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

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

运行此代码时，您将看到8个水平和垂直方向分开的矩形;要清楚，我想要的是每个矩形紧紧地相互对接。

我使用常量宽度和高度来绘制函数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>

Answer 1

房祖名，

请记住，draw（）方法发生在setX（）方法之后;

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

在第二次迭代中，当你执行setX（80）时，你的水平引用变为80px，很好。

之后，你调用moveTo（80,0），所以笔划定位在点（160,0）---＆gt; / 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>

干杯!!

Answer 2

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);
}

KineticJS - 绘制形状时使用坐标

2 个答案: