首页 > 解决方案 > 如何填写 konvajs 路径图片?

问题描述

我在框架 konvajs 中叠加图片时遇到了问题。如何才能做到这一点?这样的想法是为了反转路径并将其循环并强加另一条路径。我得跑一个人在路上,而且在nm的背景下这种方式。目前这里有这样一个输入码

var stage = new Konva.Stage({
    container: 'myCanvas',
    width: document.querySelector('#myCanvas').clientWidth,
    height: document.querySelector('#myCanvas').clientHeight
    });

var layer = new Konva.Layer();

var imageObjT2 = new Image();
    imageObjT2.onload = function() {
      var path2 = new Konva.Path({
        x: 0,
        y: 0,
        data: 'M 56 336 Q 135 403 209 346 C 221.5 300.5 271.5 300.5 284 255 Q 356 193 421 282 Q 447 300.5 483 346 Q 551 358 599 369 C 680 345 730 345 751 371',
        stroke: 'green',
      });

      path2.fillPatternImage(imageObjT2);
      layer.add(path2);
      stage.add(layer);

    };
imageObjT2.src = 'https://opengameart.org/sites/default/files/tileable-grass_clover_tt7010116-sample_1.png';
#myCanvas {
    width: 800px;
    height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="myCanvas"></div>
<script src="https://unpkg.com/konva@3.4.1/konva.min.js"></script>

标签: javascriptsvgpathkonvajs

解决方案


推荐阅读