Question

我有一个可拖动的Vue Konva舞台。在背景层中，我有一个带有水平线和垂直线的可视网格。现在，在缩放内容时，需要缩放网格。平移也是如此。如果滚动到底部，您将超出顶部的水平线，因此必须以非常特殊的方式转换这些线。我是这样用Vue和Canvas做到的：

  drawGrid(translateX, translateY, gridSize){
    this.context.strokeStyle = 'gray';
    this.context.lineWidth = 1;

    //Horizontal grid-lines
    for (var t = 0.5; t < this.$refs.mainCanvas.height; t = t + gridSize * this.scaleFactor){
      this.context.beginPath();
      this.context.moveTo(0, t + translateY % (gridSize * this.scaleFactor));
      this.context.lineTo(this.$refs.mainCanvas.width, t + translateY % (gridSize * this.scaleFactor));
      this.context.stroke();
    }

    //Vertical grid-lines
    for (var t = 0.5; t < this.$refs.mainCanvas.width; t = t + gridSize * this.scaleFactor){
      this.context.beginPath();
      this.context.moveTo(t + translateX % (gridSize * this.scaleFactor), 0);
      this.context.lineTo(t + translateX % (gridSize * this.scaleFactor), this.$refs.mainCanvas.height);
      this.context.stroke();
    }}

现在，我想对Vue + Konva进行同样的操作，但是我无法使其运行。我最喜欢的方法是使用v-for指令在模板中添加行。我无法在模板中解决舞台的宽度和高度，也无法解决舞台的翻译问题。

有没有办法解决这个问题的精巧版本？

在Vue Konva中绘制网格

0 个答案: