Question

我想在konvajs的形状上进行免费绘图。像exp您能给我有关zindex或smt之类的形状属性的建议吗？

https://ibb.co/jq9pUK

Answer 1

您的问题非常广泛，您没有展示到目前为止所做的尝试。如果您给出清晰的描述并为您的问题张贴简化的示例代码，则可以更快地获得更好的帮助。

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

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

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

下面的工作片段显示了如何执行我上面列出的步骤，以及如何侦听使其运行所需的事件。您可以从此入门代码扩展到处理擦除，选择线条颜色，粗细和笔触样式。有关更多信息，请参见Konvajs drawing tutorial。

祝你好运。

// 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>

如何在konvajs中自由绘制形状

1 个答案: