Как нарисовать фигуру из пути в vue konva? - PullRequest
Новая
       47

Как нарисовать фигуру из пути в vue konva?

1 голос
/ 06 апреля 2019

Я пытаюсь использовать konvajs внутри vue.Я хочу нарисовать объект из данных пути, но я не знаю, как это сделать.Моя главная цель - получить данные о пути от сервера, но сначала я бы хотел увидеть рисунок в действии.

Спасибо!Вся помощь приветствуется.

  <div>
    <v-container>
      <v-layout align-end justify-center row fill-height>
        <v-flex xs12>
          <v-stage :config="configKonva">
            <v-layer>
              <v-shape :config="configShape"/>
            </v-layer>
          </v-stage>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      configShape: {},
      configKonva: {
        width: 200,
        height: 200
      }
    };
  },
  methods: {},
  mounted() {
    this.configShape = new Konva.Path({
      fill: "#00D2FF",
      stroke: "black",
      strokeWidth: 4,
      data: "m0,0L100,100L0,100L0,0",
      sceneFunc: function(context, shape) {
        // special Konva.js method
        context.fillStrokeShape(shape);
      }
    });
  }
};
</script>```

Ответы [ 2 ]

2 голосов
/ 07 апреля 2019

Не рекомендуется использовать sceneFunc для встроенных фигур (например, Konva.Path).

Изучите учебник фигур для vue-konva https://konvajs.org/docs/vue/Shapes.html.

Если вы хотите создать Konva.Path, вам нужно использовать v-path компонент: 

<v-path
  :config="{
    x: 200,
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    data: 'm0,0L100,100L0,100L0,0',
  }"
/>

Демо: https://codesandbox.io/s/32xxoon18p

Вы хотите иметь полный контроль над рисунком, вы можете использовать пользовательские фигуры: https://konvajs.org/docs/vue/Custom_Shape.html

0 голосов
/ 06 апреля 2019

Я мог бы заставить это работать. Я не думаю, что это правильный путь, но сейчас, по крайней мере, он работает 

 mounted() {
    this.configShape = new Konva.Path({
      fill: "#00D2FF",
      stroke: "black",
      strokeWidth: 4,
      data: "m0,0L100,100L0,100L0,0",
      sceneFunc: function(context, shape) {
        let arr = shape.attrs.dataArray;

        context.beginPath();
        for (var i = 0; i < arr.length; i++) {
          if (arr[i].command == "M") {
            context.moveTo(arr[i].points[0],arr[i].points[1]);
          } else if (arr[i].command == "L") {
            context.lineTo(arr[i].points[0],arr[i].points[1]);
          }
        }
        context.closePath();

        // special Konva.js method
        context.fillStrokeShape(shape);
      }
    });
  }
...