Fabric.js

by duckywang1

HTML

<script src="https://cdn.bootcss.com/fabric.js/2.2.0/fabric.js"></script>
<canvas id="myCanvas" width="400" height="300"></canvas>
<button onclick="testClip()"> 普通预览模式 </button>
<button onclick="testRecover()"> 编辑模式 </button>

CSS

* { padding: 0; margin: 0; }
canvas { border: 1px solid #ccc; }

JavaScript

var modalConf = {
  top: 50,
  left: 50,
  width: 300,
  height: 200,
};

var canvas = new fabric.Canvas('myCanvas');

function canvasClear() {
  canvas.clear();
  canvas.backgroundColor = 'rgba(102, 115, 255, 0.2)';
  canvas.renderAll();
}
function initBg() {
  var bgLayoutRect = new fabric.Rect();
  bgLayoutRect.set({
    width: 400,
    height: 300,
    fill: '#000',
    opacity: 0.5,
    selectionBackgroundColor: 'rgba(255, 255, 255, 0.3)',
  });

  var modalRect = new fabric.Rect();
  modalRect.set({
    top: modalConf.top,
    left: modalConf.left,
    width: modalConf.width,
    height: modalConf.height,
    fill: '#fff',
    opacity: 1,
    selectionBackgroundColor: 'rgba(255, 255, 255, 0.3)',
  });
  bgLayoutRect.set('selectable', false);
  modalRect.set('selectable', false);
  canvas.add(bgLayoutRect);
  canvas.add(modalRect);
  canvas.renderAll();
}
function initText() {
  var textContent = '编辑模式 与 普通模式'
  var textLayer = new fabric.Text(textContent, {
    top: 100,
    fontSize: 18,
    selectionBackgroundColor: 'rgba(255, 255, 255, 0.3)',
    rotatingPointOffset: -40,
  });
  canvas.add(textLayer);
  canvas.renderAll();
}

canvasClear();
initBg();
initText();

function testClip() {
  console.log('testClip');
  canvas.clipTo = function(ctx) {
      ctx.rect(modalConf.top,modalConf.left,modalConf.width,modalConf.height);
  };
  canvasClear();
  initBg();
  initText();
}

function testRecover() {
  console.log('testRecover');
  canvas.clipTo = null;
  canvasClear();
  initBg();
  initText();
}