fabricjs | 易学教程

How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

阅读更多关于 How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

I am using below code: <script type='text/javascript'>//<![CDATA[ window.onload=function(){ /// (c) Ken Fyrstenberg Nilsen, Abidas Software .com /// License: CC-Attribute var ctx = demo.getContext('2d'), font = '64px impact', w = demo.width, h = demo.height, curve, offsetY, bottom, textHeight, angleSteps = 255/h, i = h, y, os = document.createElement('canvas'), octx = os.getContext('2d'); os.width = w; os.height = h; octx.font = font; octx.textBaseline = 'top'; octx.textAlign = 'center'; function renderBridgeText() { curve = parseInt(iCurve.value, 10); offsetY = parseInt(iOffset.value, 10);

Snap edges of objects to each other and prevent overlap

阅读更多关于 Snap edges of objects to each other and prevent overlap

问题 My goal is to prevent overlapping of two or more rectangles inside my FabricJS canvas. Imagine two rectangles having info on position and size and you can drag and drop any rectangle inside the canvas. If rectangle A gets close enough to rectangle B, the position of rectangle A should snap to the edge of rectangle B. This should work for any edge of rectangle B. The vertices do not have to match, cause the sizes of the rectangles are variable. I have a working example for this snapping on one

Fabric.js - how to save canvas on server with custom attributes

阅读更多关于 Fabric.js - how to save canvas on server with custom attributes

问题 I'd like to be able to save the current canvas' state to a server-side database, probably as a JSON string, and then later restore it with loadFromJSON . Typically, this is easily accomplished using: var canvas = new fabric.Canvas(); function saveCanvas() { // convert canvas to a json string var json = JSON.stringify( canvas.toJSON() ); // save via xhr $.post('/save', { json : json }, function(resp){ // do whatever ... }, 'json'); } And then function loadCanvas(json) { // parse the data into

Fabric.js Clip Canvas (or object group) To Polygon

阅读更多关于 Fabric.js Clip Canvas (or object group) To Polygon

问题 I have a canvas drawn in Fabric.js that i am adding a group of rectangles to, i want to limit the edges of those rectangles as a group to not go outside a certain area. Imagine making a stripy t-shirt, the stripes are make by using a series of rectangles and i need to keep them to the shape of the t-shirt. I think its better to clip the entire canvas to the shape of the t shirt, so anything i add to it remains within the t-shirt but i am stuck. So far i am only clip to basic circles and

How does transforming points with a transformMatrix work in fabricJS?

阅读更多关于 How does transforming points with a transformMatrix work in fabricJS?

问题 I'm trying to place points (made via fabric.Circle ) on the corners of a fabric.Polygon . The polygon may be moved, scaled or rotated by the user. However, after each modification I want to have the new coordinates of the polygon to place my circles there. While digging deeper into this topic I found this great explanation of transformation matrices. I thought it's the perfect solution for what I want to achieve. But as you can see in the Fiddle, my points are always way off my polygon. As I

How to get the canvas-relative position of an object that is in a group?

阅读更多关于 How to get the canvas-relative position of an object that is in a group?

问题 Normally an object\'s position relative to the canvas can be gotten from it\'s .left and .top attributes, but these become relative to the group if the object is in a selection/group. Is there a way to get their position relative to the canvas? 回答1: When an object is inside a group, its coordinates relative to the canvas will depend on the origin of the group (and origin of the object as well). Lets say we have this code which has a rect and a circle added to a group. var canvas = new fabric

canvas.toDataURL() for large canvas

阅读更多关于 canvas.toDataURL() for large canvas

问题 I have a problem with .toDataURL() for large canvas. I want to enconde in base64 and decode on php file but if I have a large canvas the strDataURI variable is empty. My code: var strDataURI = canvas.toDataURL(); strDataURI = strDataURI.substr(22, strDataURI.length); $.post(\"save.php\", { str: strDataURI }; Is there any alternative to .toDataURL() or some way to change the size limit? Thanks. 回答1: I'm not sure if there are limitation to canvas dimensions, but data urls have limitations

What is the best practice to export canvas with high quality images?

阅读更多关于 What is the best practice to export canvas with high quality images?

问题 I need your help. I explain my situation: I’m using fabric.js library to place shapes, text, etc. in my application. My canvas size has 1000x1000 pixels (about 26.45x26.45 centimeters). I have an image upload script only for upload images in high quality, like 300 dpi. Basically what I do is the following: - draw the canvas (uploading images, put text, etc…); - resize the canvas multiplying by scale factor to be able at the end to have an image with 300dpi; - save the canvas in PNG format; -

How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

阅读更多关于 How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

问题 I am using below code: <script type=\'text/javascript\'>//<![CDATA[ window.onload=function(){ /// (c) Ken Fyrstenberg Nilsen, Abidas Software .com /// License: CC-Attribute var ctx = demo.getContext(\'2d\'), font = \'64px impact\', w = demo.width, h = demo.height, curve, offsetY, bottom, textHeight, angleSteps = 255/h, i = h, y, os = document.createElement(\'canvas\'), octx = os.getContext(\'2d\'); os.width = w; os.height = h; octx.font = font; octx.textBaseline = \'top\'; octx.textAlign = \