我如何决定在 canvas 中画一个圆还是一个矩形？

Question

我想通过按钮来决定画矩形还是圆形。到目前为止有效。但是如果我先按圆形按钮然后按矩形按钮，它不会删除圆形。反之亦然。但我只想一次显示一个对象。应显示用户最后按下的对象。

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

Answer 1

使用 visible 属性到 show/hide 来自 canvas 的对象。

演示版

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>

我如何决定在 canvas 中画一个圆还是一个矩形？

How can I decide whether I want to draw a circle or a rectangle in one canvas?

html

geometry

rect

html5-canvas

fabricjs