如何在 konvajs 中自由绘制形状

Question

我想在 konvajs 的形状顶部自由绘图。你能给我一些关于zindex或smt等形状的建议吗？

https://ibb.co/jq9pUK

Answer 1

你的问题非常广泛，你没有展示你到目前为止已经尝试过的东西。如果您给出清晰的描述并为您的问题发布精简的示例代码，您会更快地获得更好的帮助。

Konvajs在HTML5画布上工作。使用konvajs时，您可以将形状，线条，图像和文本放在图层上。图层具有 z 顺序，图层上的形状具有 z 顺序。

为了回答你的问题，我会遵循以下模式： - 创建舞台 - 创建形状图层 - 将形状添加到形状层 - 三角形，矩形，圆形等 - 为手绘添加另一层 - 在此图层上绘制。

由于将组件添加到画布的顺序，z 顺序将支持您在问题中要求的内容。如果您希望绘图发生在形状的"后面"，则可以以相反的顺序创建图层。

下面的工作片段显示了如何执行我上面列出的步骤，以及如何侦听使其运行所需的事件。您可以从此起始代码扩展以处理擦除，选择线条颜色、粗细和描边样式。有关更多信息，请参阅 Konvajs 绘图教程。

祝你好运。

// Set up the canvas / stage
var s1 = new Konva.Stage({container: 'container1', width: 300, height: 200});
// Add a layer for the shapes
var layer1 = new Konva.Layer({draggable: false});
s1.add(layer1);
// draw a cirlce
var circle = new Konva.Circle({
x: 80,
y: s1.getHeight() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
})
layer1.add(circle)
// draw a wedge.
var wedge = new Konva.Wedge({
x: 200,
y: s1.getHeight() / 2,
radius: 70,
angle: 60,
fill: 'gold',
stroke: 'black',
strokeWidth: 4,
rotation: -120
});
layer1.add(wedge)
// Now add a layer for freehand drawing
var layer2 = new Konva.Layer({draggable: false});
s1.add(layer2);
// Add a rectangle to layer2 to catch events. Make it semi-transparent 
var r = new Konva.Rect({x:0, y: 0,  width: 300, height: 200, fill: 'blue', opacity: 0.1})
layer2.add(r)
// Everything is ready so draw the canvas objects set up so far.
s1.draw()
var drawingLine = null; // handle to the line we are drawing
var isPaint = false; // flag to indicate we are painting
// Listen for mouse down on the rectangle. When we get one, get a new line and set the initial point
r.on('mousedown touchstart', function () {
isPaint = true;
var pos = s1.getPointerPosition();
drawingLine = newLine(pos.x, pos.y);
drawingLine.points(drawingLine.points().concat(pos.x,pos.y)); 
layer2.draw();
});
// Listen for mouse up ON THE STAGE, because the mouseup will not fire on the rect because the mouse is actually over the line point we just drew when it is released.
s1.on('mouseup touchend', function () {
isPaint = false;
drawingLine = null;
});
// when the mouse is moved, add the position to the line points and refresh the layer to see the effect.
r.on('mousemove touchmove', function () {
if (!isPaint) {
return;
}
var pos = s1.getPointerPosition();
drawingLine.points(drawingLine.points().concat(pos.x,pos.y)); 
layer2.draw();  
})
// Function to add and return a line object. We will extend this line to give the appearance of drawing.
function newLine(x,y){
var line = new Konva.Line({
points: [x,y,x,y],
stroke: 'limegreen',
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round'
});

layer2.add(line)
return line;
}

p
{
padding: 4px;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<p>Click & drag on the canvas to draw a line over the shapes.
</p>
<div id='container1' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>