Сдвиг координат объекта влево без потери исходного значения - PullRequest
Новая
       19

Сдвиг координат объекта влево без потери исходного значения

0 голосов
/ 26 апреля 2019

Я пытаюсь найти способ «смещения» объекта по вертикали и горизонтали, не теряя при этом исходных значений.

В основном, что мне нужно, чтобы остаться с теми же позициями элементов и исходными положениями Left и Top (в моем случаеони равны 0, 0), но делают поворот на основе источника Center.

См. скриншоты ниже ...

Загрузка с левым верхним началом:

enter image description here

Нагрузка с центральным началом: enter image description here

Ожидается: enter image description here

Ссылка на Fiddler 

const canvas = new fabric.Canvas('paper');
const items = ['red', 'green'];

items.forEach((color, i)=>{
	const box = new fabric.Rect({
		id: color,
    left: 0,
    top: 0,
    width: 100,
    height: 100,
    fill: color,
    angle: i * -45,
    originX: 'left',
  	originY: 'top'
	});
  canvas.add(box);
});
        
canvas.renderAll();

canvas.on('selection:created', ({target})=>{
	print(target);
});

canvas.on('selection:updated', ({target})=>{
	print(target);
});

function print(target){
	$("#top").val( target.top );
  $("#left").val( target.left );
  $("#color").val( target.id );
}
#paper {
  border: solid 1px red;
}

label {
  width: 45px;
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="paper" width="200" height="200" style="border:1px solid #ccc"></canvas>
<br>
<label>Top:</label>
<input id="top" type="number" disabled/>
<br>
<label>Left:</label>
<input id="left" type="number" disabled/>
<br>
<label>Color:</label>
<input id="color" type="text" disabled/>
...