fabricjs

问题 I recently started to work with fabricjs, and I have a question about connectivity object. i do creating sample demo for connectivity from parent object to child object connect with arrow. I got sample demo http://kpomservices.com/HTML5CanvasCampaign/campaign.html . This code should work with fabric 1.4.2.A similar code is possible for the version 2.3.3 not work. Error functions.js:963 Uncaught TypeError: c.setAngle is not a function code function makeArrow(centerpt, left, top, line) { var c

问题 This answer gives a helpful explication of how to add a "link" (really, an event that redirects to a URL) to a particular object rather than to all objects on the canvas: How to add URL to an image in Fabric.js? However, when placed inside a loop that generates multiple objects, it only links to the last object created's value. Here's an example: for (var p = 0; p<2; p++) { var object = new fabric.Circle({ radius: 10, top: 10 + 20 * p, left: 10 }); object.on('selected', function() { window

问题 This is the code that is working on google chrome var pointer = canvas.getPointer(event.e); var posiX = pointer.x; var posiY = pointer.y; posiX=Math.round( posiX ); posiY=Math.round( posiY ); On mozzila i am getting "TypeError: event is undefined" and it is pointing at var pointer = canvas.getPointer(event.e); 回答1: Dime, Please use mouse events like this: canvas.on('mouse:down', function(event){ var pointer = canvas.getPointer(event.e); var posiX = pointer.x; var posiY = pointer.y; posiX=Math

问题 Using Fabric.js, I'm having trouble truly rotating a triangle around its center point, or at least what I believe should be the center point. I created a jsFiddle that demonstrates. The triangle is simple, and I used originX: 'center' and the same for originY, however as the triangle is rotating, there is still slight movement in the x and y directions. How do I make sure that the triangle never moves? I found this answer and was wondering if this is the right path to take? how to rotate

问题 I would like to apply a filter in the overlayImage. the only way to do it, is appling the filter in the whole canvas after render? 回答1: There's no built-in support for this, but it's fairly easy to "hack". var overlayImageUrl = '...'; // load overlay image first fabric.Image.fromURL(overlayImageUrl, function(oImg) { // add and apply filter to overlay image oImg.filters.push(new fabric.Image.filters.Grayscale()); oImg.applyFilters(); // set <img> element of fabric.Image instance // and assign

问题 How to change "Rotating point" position to the bottom (see image below) ? And here is the link guide to configuration controls point of selecting object. http://fabricjs.com/fabric-intro-part-4#customization Thank you! 回答1: Just use the angle to rotate the circle 180 degrees and the "Rotating point" will be at the bottom, if the object is something other than a circle add flipY to the mix to keep the object upright. <canvas id="canvas" width="170" height="170"></canvas> <script src="https:/

问题 I am developing an app where user will get to choose image from the list of images that are provided. When user clicks on the image from the list, the selected image should be shown on canvas as a background. I am developing this using reactjs, redux and fabricjs. i dont get selected image when i do this.props.getSelectedImage.image.image so i can update in setCanvasBackground. image-list.js class Images extends React.Component { renderImages() { const { images, selectImage } = this.props;

问题 Here is a fabric.js example with a canvas and a rectangle, with a mouse down handler on each: var canvas = new fabric.Canvas('c'); var rect = new fabric.Rect({ left: 100, top: 100, width: 50, height: 50, fill: '#faa', }) canvas.add(rect); canvas.on('mouse:down', function(options) { console.log('canvas event'); }); rect.on('mousedown', function(options) { console.log('rect event'); }); Why does it need to be mouse:down on the canvas, but mousedown on the rectangle? If I change either, they

问题 Is there any way to count how many objects are already in canvas using Fabric.js function addImage(imageName) { fabric.Image.fromURL('./image_path/' + imageName, function (image) { image.set({ left: 10, top: 10, width: 100, height: 100, centeredScaling: true, lockUniScaling: true }) canvas.add(image); }); }; and then you have jQuery: $('.click').on("click", function (e) { e.preventDefault; var imgId = $(this).attr('id'); var number = $('canvas img').length; if (number == 5) { alert("You can

问题 How can i calculate a specific position of canvas(e.g. Bottom Center) after changing the viewport position and Zoom Level ? Right now i am trying something like this. But it only works for viewport. canvasPoint = { left:(canvas.width/2)-canvas.viewportTransform[4], top: canvas.height-canvas.viewportTransform[5] } When i Zoom Out or Zoom In , i am unable to find the new center-bottom point for canvas. 回答1: You have to use the matrices. Your bottom - center corner has coordinates: var p = {x: