Как я могу решить, хочу ли я нарисовать круг или прямоугольник на одном холсте? - PullRequest
Новая
       28

Как я могу решить, хочу ли я нарисовать круг или прямоугольник на одном холсте?

1 голос
/ 30 марта 2019

Я хотел бы решить по кнопке, рисовать ли я прямоугольник или круг. Это работает до сих пор. Но если я сначала нажму кнопку «Круг», а затем кнопку «Прямоугольник», круг не будет удален. Другой способ, это то же самое. Но я хочу, чтобы одновременно отображался только один объект. Объект, который пользователь наконец нажал, должен отобразиться. 

<html>
<head>
<script src="fabric.js"></script>
</head>
   <body>
<canvas id="c" width="500" height="500"></canvas>
<button type="button" onclick="drawArc()">circle</button>
<button type="button" onclick="drawRect()">rectangle</button>

<scipt>

var canvas = new fabric.Canvas("c");
var context = canvas.getContext('2d');
var rect = new fabric.Rect({
//circle values
});
var circle = new fabric.Circle({
//rect values
});

function clear() {
     context.clearRect(0, 0, canvas.width, canvas.height);
                  }

function drawRect() {
    clear();
    canvas.add(rect);
                    }

function drawArc() {
   clear();
   canvas.add(circle);
                   }
</script>

   </body>
</html>

1 Ответ

0 голосов
/ 30 марта 2019

Используйте видимое свойство, чтобы показать / скрыть объект от холста.

DEMO 

var canvas = new fabric.Canvas("c");
var rect = new fabric.Rect({
  width: 50,
  height: 50,
  fill: 'green',
  visible: false
});
var circle = new fabric.Circle({
  radius: 50,
  fill: 'blue',
  visible: false
});
canvas.add(rect, circle)

function drawRect() {
  circle.visible = false;
  rect.visible = true;
  canvas.requestRenderAll();
}

function drawArc() {
  circle.visible = true;
  rect.visible = false;
  canvas.requestRenderAll();
}
canvas{
  border:1px solid;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.js"></script>
<button type="button" onclick="drawArc()">circle</button>
<button type="button" onclick="drawRect()">rectangle</button><br>
<canvas id="c" width="500" height="500"></canvas>
...