物体似乎出现在我的画布后面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了物体似乎出现在我的画布后面相关的知识,希望对你有一定的参考价值。

我正在使用fabricjs库(1.7.21)向我的画布添加对象但是我得到了这种奇怪的行为,其中对象看起来在画布后面。文本显示为白色或在画布后面,我不知道为什么或如何。我在这里错过了什么?

var canvas = this.__canvas = new fabric.Canvas('canvas');

responsive();
window.addEventListener('resize', responsive);

function responsive() {
  var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
  var widthn = width - 10;
  var heightn = height - 10;
  canvas.setDimensions({
    width: widthn,
    height: heightn
  });
}

function clearcan() {
  var txt;
  if (confirm("Chuck this?")) {
  console.log(canvas)
    canvas.clear().renderAll();
    newleft = 0;
  }
}

// Add Text
function Addtext() {
  var text = new fabric.IText("Tape & Type...", {
    fontSize: 30,
    top: 10,
    left: 10,
    width: 200,
    height: 200,
    textAlign: "center"
  });
  canvas.add(text);
  canvas.setActiveObject(text);
  text.enterEditing();
  text.selectAll();
  text.renderCursorOrSelection(); // or canvas.renderAll();
}
body {
  background-color: #303030;
  color: white;
}

canvas {
  border-radius: 3px;
  border: 1px solid #3030;
  margin: 5px;
  background-color: white;
}

.btn {
  background-color: #3030;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<div class="col d-flex justify-content-center">

  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
      <button onclick="clearcan();" type="button" class="btn btn-sm">Clear</button>
      <button onclick="Addtext()"type="button" class="btn btn-sm"> Add Text</button>
      
    </div>
    
  </div>
</div>
<canvas id="canvas"></canvas>

Here's my JSFiddle

答案

从css中删除背景颜色,适用于上部和下部画布。用这个

var canvas = this.__canvas = new fabric.Canvas('canvas',{
 backgroundColor:'white'
});

它会使较低的画布背景变白。

DEMO

var canvas = this.__canvas = new fabric.Canvas('canvas',{
 backgroundColor:'white'
});

responsive();
window.addEventListener('resize', responsive);

function responsive() {
  var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
  var widthn = width - 10;
  var heightn = height - 10;
  canvas.setDimensions({
    width: widthn,
    height: heightn
  });
}

function clearcan() {
  var txt;
  if (confirm("Chuck this?")) {
  console.log(canvas)
    canvas.clear().renderAll();
    newleft = 0;
  }
}

// Add Text
function Addtext() {
  var text = new fabric.IText("Tape & Type...", {
    fontSize: 30,
    top: 10,
    left: 10,
    width: 200,
    height: 200,
    textAlign: "center"
  });
  canvas.add(text);
  canvas.setActiveObject(text);
  text.enterEditing();
  text.selectAll();
  text.renderCursorOrSelection(); // or canvas.renderAll();
}
body {
  background-color: #303030;
  color: white;
}

canvas {
  border-radius: 3px;
  border: 1px solid #3030;
  margin: 5px;
  //background-color: white;
}

.btn {
  background-color: #3030;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script>
<div class="col d-flex justify-content-center">

  <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
      <button onclick="clearcan();" type="button" class="btn btn-sm">Clear</button>
      <button onclick="Addtext()"type="button" class="btn btn-sm"> Add Text</button>
      
    </div>
    
  </div>
</div>
<canvas id="canvas"></canvas>

以上是关于物体似乎出现在我的画布后面的主要内容,如果未能解决你的问题,请参考以下文章

BottomNavigationView 后面的片段中的底部工作表

将 imageCollection 从 Google 地球引擎导入到 QGIS - 如果代码和 crs 似乎没问题,为啥地图不会出现在画布上?

片段内容未出现在手机上

在画布上绘制片段视图

当 ViewPager 中的片段出现和消失时如何执行一些代码

片段在我的回收站视图中表现得很奇怪