0
Я хочу, чтобы добавить изображения на холсте и выберите по одному и применять урожай угождать иметь вид: http://jsfiddle.net/kNEaX/586/Crop несколько изображений на одном холсте с помощью FabricJs
оригинальный пост: Crop Functionality using FabricJs
var canvas = new fabric.Canvas('c1');
canvas.backgroundColor = "#333";
canvas.renderAll();
var mouseDown;
var r = document.getElementById('c1').getBoundingClientRect();
var src = "http://fabricjs.com/lib/pug.jpg";
var disabled = true;
var scaleX, scaleY
var el
fabric.util.loadImage(src, function(img) {
object = new fabric.Image(img);
object.set({
// left: 200,
// top: 200,
selectable: true
});
object.hasRotatingPoint = true;
// object.scaleX = object.scaleY = 0.25;
canvas.add(object);
canvas.renderAll();
});
canvas.on("mouse:down", function(event) {
if (!disabled) {
el.width = 2;
el.height = 2;
el.left = event.e.pageX - r.left;
el.top = event.e.pageY - r.top;
el.visible = true;
mouseDown = event.e;
canvas.bringToFront(el);
canvas.renderAll();
}
});
canvas.on("mouse:move", function(event) {
if (mouseDown && !disabled) {
el.width = event.e.pageX - mouseDown.pageX;
el.height = event.e.pageY - mouseDown.pageY;
canvas.renderAll();
}
});
canvas.on("mouse:up", function(event) {
mouseDown = null;
if (disabled === false) {
cropB()
}
});
$('#cropB-start').on('click', function(event) {
var obj = canvas.getActiveObject();
if (obj) {
disabled = false;
el = new fabric.Rect({
fill: 'transparent',
stroke: '#ccc',
strokeDashArray: [2, 2],
visible: false
});
el.visible = false;
canvas.add(el);
canvas.renderAll();
obj.set({
selectable: false
})
canvas.renderAll();
}else{
alert('Please select the photo and then click Start Crop, to reset crop click the Reset button')
}
});
$('#cropB-reset').on('click', function(event) {
var obj = canvas.getActiveObject();
obj.clipTo = null;
canvas.renderAll();
});
function cropB() {
var image = canvas.getActiveObject();
if (image) {
scaleX = image.get('scaleX'),
scaleY = image.get('scaleY')
image.clipTo = function(ctx) {
// origin is the center of the image
var x = el.left - image.getWidth()/2
var y = el.top - image.getHeight()/2
ctx.rect(x, y, el.width * scaleX, el.height * scaleY);
};
image.selectable = true;
disabled = true;
el.visible = false;
canvas.renderAll();
}
};body {
background-color: #ccc;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<canvas style="-moz-user-select: none; cursor: crosshair;" width="400" height="400" id="c1"></canvas>
<button id=cropB-start>Start Crop</button>
<button id=cropB-reset>Reset</button>проблема заключается в том, что если я добавляю масштаб фотографии или переместить фотографию, а затем применить урожай, он не показывает правильный урожай.
Пожалуйста, взгляните на скрипку и посмотрите, что вы можете сделать.