Как показать ограничивающий прямоугольник при наведении мыши на объекты в Fabricjs?

Question

Я хочу показать ограничивающую рамку объекта, когда мышь наводит курсор на объекты, подобные этому видео, как это сделать?

Я использую canvas.on ('mouse: over') с selectedObj.drawBorders .Однако контурная рамка рисуется в неправильном положении.И я не знаю, как очистить эту рамку, когда мышь выходит из объекта.

Вот мой код:

$(function() {
		
		var canvasObject = document.getElementById("editorCanvas");

		// set canvas equal size with div
		$(canvasObject).width($("#canvasContainer").width());
		$(canvasObject).height($("#canvasContainer").height());

		var canvas = new fabric.Canvas('editorCanvas', {
			backgroundColor: 'white',
			selectionLineWidth: 2,
			width: $("#canvasContainer").width(),
			height: $("#canvasContainer").height()
		});
		
		canvas.viewportTransform[4] = 20;
    	canvas.viewportTransform[5] = 40;
		
		canvas.on('mouse:over', function(opts) {
			var selectedObj = opts.target;
			if (selectedObj != null) {
				selectedObj.drawBorders(canvas.getContext())
			}
		});
		
		var text = new fabric.Text('hello world', { left: 50, top: 50 });
		canvas.add(text);
		
		setObjectCoords();
		
		function setObjectCoords() {
		  canvas.forEachObject(function(object) {
			object.setCoords();
		  });
		}
		
	});

<style>
  #canvasContainer {
    width: 100%;
    height: 100vh;
    background-color: gray;
  }
</style>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
  
<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

Пожалуйста, помогите мне решить эту проблему!Спасибо!

Answer 1

Используйте метод _renderControls и в styleOverride установите hasControls : false для рисования только границ.

DEMO

$(function() {
  var canvas = new fabric.Canvas('editorCanvas', {
    backgroundColor: 'white',
    selectionLineWidth: 2,
    width: $("#canvasContainer").width(),
    height: $("#canvasContainer").height()
  });

  var text = new fabric.IText('hello world', {
    left: 50,
    top: 50
  });
  canvas.add(text);
  canvas
  text.on('mouseover', function() {
    this._renderControls(this.canvas.contextTop, {
      hasControls: false
    })
  })
  text.on('mousedown', function() {
    this.canvas.clearContext(this.canvas.contextTop);
  })
  text.on('mouseout', function() {
    this.canvas.clearContext(this.canvas.contextTop);
  })
});

<style>
  #canvasContainer {
    width: 100%;
    height: 100vh;
    background-color: gray;
  }
</style>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
  
<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

Answer 2

Вот как я бы сделал это, используя простой Javascript: Я измеряю текст, используя метод ctx.measureText(). Функция drawBBox() рисует ограничивающую рамку без обводки При перемещении мыши по холсту я определяю положение мыши, и если мышь находится внутри рамки, я вызываю ctx.stroke ().

Пожалуйста, прочитайте комментарии в моем коде.

Надеюсь, вы найдете это полезным, хотя я не использую fabricjs

let ctx = editorCanvas.getContext("2d");
let cw = editorCanvas.width = canvasContainer.clientWidth,cx = cw/2;
let ch = editorCanvas.height = canvasContainer.clientHeight,cy = ch/2;
let start = {x:50,y:50}// where the text begin


let text = "hello world"; 
//set some properties of the text
ctx.fillStyle = "blue";
ctx.font="2em Verdana";
ctx.textBaseline="hanging";
//draw the text
ctx.fillText(text,start.x,start.y);

let measure = ctx.measureText(text);

function drawBBox(measure){
// a function to draw the bounding box
// the box has no stroke yet
  ctx.beginPath();
  ctx.moveTo(start.x,start.y)
  ctx.lineTo(start.x+measure.width,start.y);
  ctx.lineTo(start.x+measure.width,start.y+36);//36 = 2em: the height of the text
  ctx.lineTo(start.x,start.y+36);
  ctx.closePath();
}



editorCanvas.addEventListener("mousemove",(evt)=>{
  //clear the canvas
  ctx.clearRect(0,0,cw,ch);
  //get the position of the mouse
  let m = oMousePos(editorCanvas, evt);
  //draw the text
  ctx.fillText(text,start.x,start.y);
  // draw the bounding box with no stroke
  drawBBox(measure);
  
  // if the mouse is inside the bounding box apply the stroke
  if(ctx.isPointInPath(m.x, m.y)){
    ctx.stroke()
  }
})


// a function to detect the mouse position
 function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
	return {
	x: Math.round(evt.clientX - ClientRect.left),
	y: Math.round(evt.clientY - ClientRect.top)
  }
 }

#canvasContainer {
    width: 100%;
    height: 100vh;
    background-color: gray;
  }

<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>