Как запретить вылезать за границы при рисовании?

Question

[ogneog]

Здравствуйте. Борюсь с fabric.js и не могу понять, как мне сделать, чтобы при раскраске, мой маркер не вылезал за другую зону?!

Я провел сейчас линию, у меня она зашла и на основной фон, а такого быть не должно.
Если крашу фон, то крашу фон. Если что-то другое, то соответственно, другая деталь не должна краситься.

Брал готовый пример отсюда: https://github.com/bicerinka/drawing-fabric

Поменял лишь картинку на новую с прозрачным фоном.

Answer 1

[Alexandroppolus]

можно задать область рисования, за пределами которой рисоваться не будет
https://developer.mozilla.org/en-US/docs/Web/API/C...

как убрать область? либо установить новую по всему прямоугольнику канвы, либо перед клипом сделай save(), а потом отмени с помощью restore()

Comments

[ogneog]

const canvas = new fabric.Canvas(
  'drawing', {
    isDrawingMode: true
  }
);
canvas.freeDrawingBrush.color = 'red'

const circle = new fabric.Circle({
  top: 25,
  left: 25,
  radius: 50,
  fill: 'white',
  stroke: 'black'
});

canvas.clipPath = circle;

// add the circle to the canvas
canvas.add(circle);

Нашел здесь: jsfiddle.net/synamqvu

Как пример, есть круг, дальше круга закрашивать ничего нельзя.
Как я понимаю из примера, clipPath ставится на эту фигуру, но как быть, если в моем примере подгружается изображение и подобным образом такое нельзя сделать?
Если выставлять координаты, что также можно сделать, но на выходе ожидается 300+ различных раскрасок и для каждой из них задавать вручную координаты для каждой области раскрашивания - это будет очень сложно и займет вечность.

Например, у меня на фотографии медведь, каждому уху, голове, носу, глазам, туловище там ниже, всему этому определенную область задавать координатами придется, чтобы реализовать нужный механизм? Просто это самая простая раскраска, но есть невероятно сложные рисунки и для них данная задача будет просто невыполнимой. Код из моего примера:

(function() {

	const scheme = [
		{
			image : 'test4'
		}
	];

	let currentImage = 0, imagePath = 'image/draw/';

	let $ = function(id){return document.getElementById(id)};

	let canvas = this.__canvas = new fabric.Canvas('c', {
		isDrawingMode: true,
	});



	fabric.Object.prototype.transparentCorners = false;

	let drawingColorEl = $('drawing-color'),
		drawingLineWidthEl = $('slider-line-width'),
		clearEl = $('clear-canvas'),
		rasterize = $('rasterize'),
		colorpicker = $('colorpicker');

	// color picker
	cp = ColorPicker(document.getElementById('slide'), document.getElementById('picker'),
		function(hex, hsv, rgb, mousePicker, mouseSlide) {
			currentColor = hex;
			ColorPicker.positionIndicators(
				document.getElementById('slide-indicator'),
				document.getElementById('picker-indicator'),
				mouseSlide, mousePicker
			);
			canvas.freeDrawingBrush.color = hex;
			drawingColorEl.value = hex;
            jQuery('#colorpicker').css({'border-color':hex})
		});
	cp.setHex('#e61cef');
	// color picker end

	clearEl.onclick = function() { canvas.clear() };

	jQuery( ".scheme" ).on( "click", function() {
		console.log("CLICK");
		jQuery('.scheme').removeClass('current');
		let current = jQuery( this );
		current.addClass('current');

		if ( current.hasClass("krestik") ) {

			jQuery('.krestikCategory').addClass('current');

		}else if(current.hasClass("krestikCategory")){
			jQuery( ".krestik[value=" + current.val() + "]" ).addClass('current');
			//current.val()

		}

		currentImage = jQuery( this ).val();
		canvas.clear();
		canvas.setOverlayImage(imagePath + scheme[currentImage].image + '.png', canvas.renderAll.bind(canvas));
		canvas.loadFromJSON(scheme[currentImage].json); //
		canvas.renderAll();

	});

	jQuery("#slider-line-width").slider({
		//reversed: true
	});
	jQuery("#slider-line-width").on('slide', function(slideEvt) {
		jQuery("#drawing-line-width").text(slideEvt.value);
	});

	drawingColorEl.onchange = function() {
		canvas.freeDrawingBrush.color = this.value;
	};
	drawingLineWidthEl.onchange = function() {
		canvas.freeDrawingBrush.width = parseInt(this.value, 10) || 1;
		jQuery("#drawing-line-width").text(this.value);
	};
	if (canvas.freeDrawingBrush) {
		canvas.freeDrawingBrush.color = drawingColorEl.value;
		canvas.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
	}

	// Add mouse events
	// ----------------


	canvas.on('mouse:down', function(options) {

	});

	canvas.on('mouse:move', function(options) {

	});
	canvas.on('mouse:up', function(options) {
		scheme[currentImage].json = JSON.stringify(canvas);
	});

	canvas.setOverlayImage(imagePath + scheme[0].image + '.png', canvas.renderAll.bind(canvas));
	jQuery('.vosmerka').addClass('current');

	//--------------end canvas to png image-----------------------
})();

Подскажите, что можно с этим сделать?

[Alexandroppolus]

Какого вида у тебя картинки? Просто белый лист с контурами рисунка, или фотографии? В первом случае легко будет программно определить закрашиваемые области. Во втором - как повезет..

[ogneog]

Alexandroppolus, приветствую. Обычная png без фона с черными контурами рисунка.