как я могу свободно рисовать фигуры в konvajs - PullRequest
Новая
       12

как я могу свободно рисовать фигуры в konvajs

0 голосов
/ 04 октября 2018

Я хочу сделать бесплатный рисунок поверх фигур в konvajs.как опыт;Можете ли вы дать мне совет о формах, таких как Zindex или SMT.

https://ibb.co/jq9pUK

1 Ответ

0 голосов
/ 04 октября 2018

Ваш вопрос очень широкий, и вы не показываете, что вы пробовали до сих пор.Вы получите более качественную помощь быстрее, если дадите четкое описание и опубликуете пример кода для своих вопросов

Konvajs работает поверх HTML5-холста.При работе с конвайсами вы наносите формы, линии, изображения и текст на слои.Слои имеют 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>
...