Fabric中定制的形状 - 如何超越它的尺寸？

Question

我需要绘制自定义矩形 - 每个角落都有4个“耳朵”。

所以我根据var CustomRect = fabric.util.createClass(fabric.Object, { ... } 这样定义了我自己的类：

CustomRect

重要提示：根据我的班级width创建对象时，我想将height和{{1}}定义为矩形的大小，而不是那些“耳朵” ”

但我有一个问题。 我无法在 width x height 定义的区域之外绘制。

其他所有内容都被剪裁 - 它被绘制但不可见。因此，当它们超出区域宽度x高度的限制时，我无法绘制那些“耳朵”。

如何告诉布料延伸绘图区域？如何在 width x height 区域之外绘制？

非常感谢你们！

Answer 1

所以我找到了这个解决方案。不完美，但它有效。

当Fabric根据它的function AddMappointsNew(lat, lon, strpopup, geocoder, mapgoogle, pointcolor, address, title) { var point; var iconlnk = "http://maps.google.com/mapfiles/ms/icons/red-dot.png"; if (pointcolor != "" && pointcolor == "GREEN") { iconlnk = "http://maps.google.com/mapfiles/ms/icons/green-dot.png"; } geocoder = new google.maps.Geocoder(); var addressdiv = $('<div/>').html(strpopup).html(); geocoder.geocode({ 'address': address }, function (results, status) { if (status == google.maps.GeocoderStatus.OK) { mapgoogle.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: mapgoogle, icon: iconlnk, position: results[0].geometry.location, title: title }); var infowindow = new google.maps.InfoWindow({ content: addressdiv, maxWidth: 300, maxHeight: 200 }); google.maps.event.addListener(marker, 'click', function () { infowindow.open(mapgoogle, marker); }); if (pointcolor != "" && pointcolor == "GREEN") { setSearchmarker(marker); } markersArray.push(marker); } else { mapgoogle.setZoom(5); alert("Geocode was not successful for the following reason: " + status); } }); } 和width参数调整对象的绘画区域大小时，我必须创建自己的宽度和高度参数。

Fabric的宽度和高度设置为绘制区域的大小，而我的宽度和高度设置为矩形的实际大小（没有“ear”的矩形）。

我们首先来看，类定义：

height

var CustomRect = fabric.util.createClass(fabric.Object, { initialize: function(options) { options || (options = { }); if (options.width || options.height){ alert('Do not use width/height, use my_width/my_height instead.'); } // here we set our Object's width, height to create painting area for it // It must be little larger than rectangle itself to paint "ears" options.width = options.my_width + SIZE_EXTEND; options.height = options.my_height + SIZE_EXTEND; this.callSuper('initialize', options); }, _render: function(ctx) { var PIx2 = 6.28319; // 2 * PI var w_half = (this.width - SIZE_EXTEND) / 2; var h_half = (this.height - SIZE_EXTEND) / 2; ctx.rect(this.left, this.top, this.width - SIZE_EXTEND, this.height - SIZE_EXTEND); ctx.fill(); // "ears" ctx.beginPath(); ctx.arc(-w_half, -h_half, 4, 0, PIx2, false); ctx.fill(); ctx.beginPath(); ctx.arc(w_half, -h_half, 4, 0, PIx2, false); ctx.fill(); ctx.beginPath(); ctx.arc(-w_half, h_half, 4, 0, PIx2, false); ctx.fill(); ctx.beginPath(); ctx.arc(w_half, h_half, 4, 0, PIx2, false); ctx.fill(); } } 是在其他地方定义的常量（对于我的应用程序常量是可以的）。

现在我如何在我的应用程序中使用它。在我的画布上添加一个新矩形：

SIZE_EXTEND