javascript - 如何填写 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>
解决方案
推荐阅读
- spring-webflux - 基本单声道
- spotfire - Spotfire:是否有(内置)函数来测试一行是否被标记?
- javascript - 简单的 React 计数器不起作用,console.log 也不能使用状态变量?
- java - Java ProcessBuilder + bash:“没有这样的文件或目录”
- c++ - C++:如何在一个线程中读取二进制文件并在另一个线程中写入?
- java - 如何使 TextView 的最大行数 - 如果更多 - 可滚动
- ansible - 使用 --step 选项运行 ansible-playbook 时重新启动失败的任务
- paypal - Paypal-credit 智能支付按钮未显示
- java - 我可以在具有多个实例的类上使用 Random 方法吗?
- javascript - 如何在调整大小时运行一次脚本?