https://jsfiddle.net/techticchetan/p638quv8/3/
我想在单击杯子图像时选择rect对象。
请检查以下链接。我想做这样的事情。http://preview.codecanyon.net/item/fancy-product-designer-woocommercewordpress/full_screen_preview/6318393?_ga=1.254133448.1940140524.1450868289
谢谢,
var canvas = new fabric.Canvas('cv' ) ;
var rect;
fabric.Image.fromURL('http://tmgraphics.biz/test/HTML5_CANVAS%20_TESTING/test-7-21-15/test33/77000_Lime.png', function(img) {
var hRatio = canvas.width / img.width ;
var vRatio = canvas.height / img.height ;
var ratio = Math.min ( hRatio, vRatio );
var centerShift_x = ( canvas.width - img.width*ratio ) / 2;
var centerShift_y = ( canvas.height - img.height*ratio ) / 2;
widdy = img.width*ratio;
hiddy = img.height*ratio;
img.set({
lockMovementX: true,
lockMovementY: true,
hasControls: false,
left: centerShift_x,
top: centerShift_y,
width: widdy,
height: hiddy,
selectable:false
});
canvas.add(img) ;
if (rect) img.bringToFront();
});
rect = new fabric.Rect({
top : 5,
left : 170,
width : 200,
height : 300,
stroke: 'blue', strokeWidth: 2,
fill : ''
});
canvas.add(rect);
canvas.bringToFront(img)
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<canvas id="cv" width="400" height="400" style="border:1px solid black;"></canvas>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句