fabricjs

问题 I am using FabricJS version : 3.6.3 I want to make new FabricJS class called : Button So that I have extend one class called Textbox from fabric js, which will Draw a Rectangle behind Text and it looking like a button. But Problem is that, I can't set height to that Button because height is not allow in Texbox object. I want to set Height and Width to Button object. Width is working Properly due to Textbox . it will also warp Text if width keep smaller then text width, and can be editable by

问题 After I draw polygon i would like to change opacity of canvas out of polygon i just drawn. I think it might have something to do with clipping but im not sure. Polygon and lines inside should have 100% opacity but everything else (background and lines outside polygon should have 50% opacity) prototypefabric.polygon = { drawPolygon: function () { canvas.on('mouse:down', function (options) { if (options.target && options.target.id == pointArray[0].id) { prototypefabric.polygon.generatePolygon

问题 After I draw polygon i would like to change opacity of canvas out of polygon i just drawn. I think it might have something to do with clipping but im not sure. Polygon and lines inside should have 100% opacity but everything else (background and lines outside polygon should have 50% opacity) prototypefabric.polygon = { drawPolygon: function () { canvas.on('mouse:down', function (options) { if (options.target && options.target.id == pointArray[0].id) { prototypefabric.polygon.generatePolygon

问题 I have created a video element in fabricjs with the following const videoE = document.createElement('video') as HTMLVideoElement; videoE.width = 240; videoE.height = 140; videoE.crossOrigin = 'anonymous'; videoE.controls = true; videoE.id = idObject.toString(); const source = document.createElement('source') as HTMLSourceElement; source.src = url; source.type = 'video/webm'; videoE.appendChild(source); console.log(videoE); const fab_video = this.fabricUtilsService.addVideo(videoE, {

问题 How can I resize polygons or other Fabricjs entities that are "points based" without scaling them? Scaling increases the strokeWidth of objects and I'd like to override this behavior. I did it for rectangles this way: /** Resize instead of scaling example */ this.on({ 'scaling': function(e) { var obj = this; obj.width = obj.scaleX * obj.width; obj.height = obj.scaleY * obj.height; obj.scaleX = 1; obj.scaleY = 1; } }); An example for an ellipse: this.on({ 'scaling': function(e) { var obj =

问题 How can I resize polygons or other Fabricjs entities that are "points based" without scaling them? Scaling increases the strokeWidth of objects and I'd like to override this behavior. I did it for rectangles this way: /** Resize instead of scaling example */ this.on({ 'scaling': function(e) { var obj = this; obj.width = obj.scaleX * obj.width; obj.height = obj.scaleY * obj.height; obj.scaleX = 1; obj.scaleY = 1; } }); An example for an ellipse: this.on({ 'scaling': function(e) { var obj =

问题 In this jsFiddle I have one Fabric line and one rect. My objective is to get the line coordinates when it moves by itself or in a group with the rect. If you only select the line and move it, the coordinates are displayed correctly (I took the function from here). But if you select both the line and the rect, the function does not work. I use e.target._objects[0] to get the line, that seems to be fine. How to get the line coordinates when it's moved in the group? 回答1: The objects inside the

问题 I am developing application which has whiteboard. Whiteboard should work like idroo.com. One user is drawing something another user should be able to see it on his browser in real time. I use fabricjs as canvas wrapper and it has everithing I need. But I can't emulate free drawing on canvas. I send mouse position and brush options to remote client and try to render them by firing mouse move events. But it don't work. If some body has simialiar problem can you please help? canvasContainer.on(

问题 I have to apply some styles on <img> thanks to a CSS class. Is it possible to get the dataURL of the <img> with the CSS style ? $(function() { // Original const imgOriginal = document.getElementById('original'); const c1 = document.getElementById('c1'); let ctx = c1.getContext('2d'); ctx.drawImage(imgOriginal, 100, 100); // Filtered const imgFiltered = document.getElementById('filtered'); const c2 = document.getElementById('c2'); ctx = c2.getContext('2d'); ctx.drawImage(imgFiltered, 100, 100)

问题 When you have a canvas element set to hasControls little controls render when the user clicks the element. These controls are little canvas squares. I would like to overlay little lines on the square controls to give a further polish to look and feel. 回答1: override fabric Object _drawControl function: fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top) { if (!this.isControlVisible(control)) { return; } var size = this.cornerSize; this.transparentCorners || ctx