织物JS &正确的碰撞检测

Question

我正在使用当前版本的Fabric JS (1.7.13)，我想要一些正确的碰撞检测。

Fabric JS网站有以下页面：http://fabricjs.com/intersection

在这一页的顶部有一张便条：

请注意，交叉是根据边框检查的，而不是实际形状。

我正在寻找一个解决方案，在实际形状上进行碰撞检测。

有这样的解决办法吗？

我在这里发现了一些类似的问题，like this one，但我发现的所有问题都只是在边界框上进行碰撞检测，而不是在形状本身上进行碰撞检测。

Answer 1

也许这支代码笔能帮你- https://codepen.io/qbahamutp/pen/EPJmzj

​

/*
	canvas dimension settings, using asset: 
		seiyria's bootstrap-slider
		https://github.com/seiyria/bootstrap-slider
*/
var AdjustCanvasDimensions = function() {
	window.canvas.setHeight(iHeight.getValue());
	window.canvas.setWidth(iWidth.getValue());
	window.canvas.renderAll();

	
	
	$('label[for="canvas-width"]').text( iWidth.getValue() + 'cm' );
	$('label[for="canvas-height"]').text( iHeight.getValue() + 'cm' );
	console.log( 'Height:' + iHeight.getValue() );
//	console.log( 'Width:' + iWidth.getValue() );
}


var iWidth = $('#canvas-width').slider().on('slide', AdjustCanvasDimensions).data('slider');

var iHeight= $("#canvas-height").slider({
//	reversed : true
}).on('slide', AdjustCanvasDimensions).data('slider');


/*
	canvas setup using asset: 
		fabricjs
		https://github.com/kangax/fabric.js/
*/
window.canvas = new fabric.Canvas('fabriccanvas');
window.counter = 0;
var newleft = 0;
var edgedetection = 20; //pixels to snap

canvas.selection = false;

function plusrect(top, left, width, height, fill) {
    window.canvas.add(new fabric.Rect({
        top: 100,
        name: 'rectangle ' + window.counter,
        left: 0 + newleft,
        width: 100,
        height: 100,
        fill: 'rgba(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ', 0.75)',
        lockRotation: true,
				lockScalingX: true,
				lockScalingY: true,
        originX: 'left',
        originY: 'top',
        cornerSize: 15,
        hasRotatingPoint: false,
        perPixelTargetFind: true,
    }));
    window.counter++;
    newleft += 200;
}
this.canvas.on('object:moving', function (e) {
    var obj = e.target;
    obj.setCoords(); //Sets corner position coordinates based on current angle, width and height
    canvas.forEachObject(function (targ) {
        activeObject = canvas.getActiveObject();

        if (targ === activeObject) return;


        if (Math.abs(activeObject.oCoords.tr.x - targ.oCoords.tl.x) < edgedetection) {
            activeObject.left = targ.left - activeObject.width;
        }
        if (Math.abs(activeObject.oCoords.tl.x - targ.oCoords.tr.x) < edgedetection) {
            activeObject.left = targ.left + targ.width;
        }
        if (Math.abs(activeObject.oCoords.br.y - targ.oCoords.tr.y) < edgedetection) {
            activeObject.top = targ.top - activeObject.height;
        }
        if (Math.abs(targ.oCoords.br.y - activeObject.oCoords.tr.y) < edgedetection) {
            activeObject.top = targ.top + targ.height;
        }
        if (activeObject.intersectsWithObject(targ) && targ.intersectsWithObject(activeObject)) {
            targ.strokeWidth = 10;
            targ.stroke = 'red';
        } else {
            targ.strokeWidth = 0;
            targ.stroke = false;
        }
        if (!activeObject.intersectsWithObject(targ)) {
            activeObject.strokeWidth = 0;
            activeObject.stroke = false;
        }
    });
});

$('#pushit').on('click', function(){
	plusrect()
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/seiyria/bootstrap-slider/master/dist/css/bootstrap-slider.min.css" rel="stylesheet"/>

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/seiyria/bootstrap-slider/master/dist/bootstrap-slider.min.js"></script>
<div id="start" class="container">
<form>
	<fieldset>
		<legend>Canvas eigenschappen</legend>
	<div class="row">
		<div class="form-group col-xs-9 col-xs-offset-2 col-md-offset-2">
			<label for="canvas-width">Breedte</label>
			<input id="canvas-width" name="canvas-width" data-slider-id='canvas-width' type="text" data-slider-min="100" data-slider-max="1000" data-slider-step="10" data-slider-value="500" style="width: 100%" />
		</div>
	</div>
	<div class="row clearfix">
		<div class="form-group col-xs-2 col-md-2 text-right">
			<label for="canvas-height">Hoogte</label>
			<input id="canvas-height" name="canvas-height" data-slider-id='canvas-height' type="text" data-slider-min="100" data-slider-max="400" data-slider-step="10" data-slider-value="200" data-slider-orientation="vertical"  />
		</div>
		<div class="col-xs-9 canvaswrapper">

			<canvas id="fabriccanvas" width="500" height="200" style="border:1px solid #ccc"></canvas>

		</div>
	</div>
	<div class="row">
		<div class="form-group col-xs-10">
			<button type="button" id="pushit" class="btn btn-primary btn-lg">Object toevoegen </button>
		</div>
	</div>
	</fieldset>
</form>
</div>

​