Fabric.js is a JavaScript canvas library that makes it easy to work with HTML5 canvas. It provides an object model on top of the canvas element and allows creating and manipulating canvas objects like rectangles, circles, images and text. The library parses SVG paths and elements and allows rendering them on canvas. It uses prototypal inheritance and has a modular class-based structure.
A library for building user interfaces
Designed for View layer
Created by Facebook/Instagram developers
Build reusable & Interactive UI components
Renders your UI and respond to events
A library for building user interfaces
Designed for View layer
Created by Facebook/Instagram developers
Build reusable & Interactive UI components
Renders your UI and respond to events
How to create a camera2
more detail blog: http://vinta.ws/booch/?p=30
reference:
Camera 2
Google I/o video:https://www.youtube.com/watch?v=92fgcUNCHic#t=1758
Camera basic demo code: https://developer.android.com/preview/samples.html
Camera2 sdk reference (Need download 60mb): http://storage.googleapis.com/androiddevelopers/preview/l-developer-preview-reference.zip
Set up android l: https://developer.android.com/preview/setup-sdk.html
Camera
HAL3:https://source.android.com/devices/camera/camera3.html
HAL Subsystem https://source.android.com/devices/camera/camera3_requests_hal.html
https://source.android.com/devices/camera/camera.html
React Js Basic Details and Descriptions
Frontend Javascript Library, to make decent SPA
The fastest way to build a segregated component based front end for software development.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
We'll take a look at setting up Shopware PWA, as well as how to create a plugin that fetches product recommendations. All without touching the Shopware Backend.
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
Map(), flatmap() and reduce() are your new best friends: simpler collections,...Chris Richardson
Higher-order functions such as map(), flatmap(), filter() and reduce() have their origins in mathematics and ancient functional programming languages such as Lisp. But today they have entered the mainstream and are available in languages such as JavaScript, Scala and Java 8. They are well on their way to becoming an essential part of every developer’s toolbox.
In this talk you will learn how these and other higher-order functions enable you to write simple, expressive and concise code that solve problems in a diverse set of domains. We will describe how you use them to process collections in Java and Scala. You will learn how functional Futures and Rx (Reactive Extensions) Observables simplify concurrent code. We will even talk about how to write big data applications in a functional style using libraries such as Scalding.
Slidedeck used to give an introduction to WebXR. It also contains the slides for a short introduction to WebVR using A-Frame and Glitch.me by showing the HTML and JavaScript.
How to create a camera2
more detail blog: http://vinta.ws/booch/?p=30
reference:
Camera 2
Google I/o video:https://www.youtube.com/watch?v=92fgcUNCHic#t=1758
Camera basic demo code: https://developer.android.com/preview/samples.html
Camera2 sdk reference (Need download 60mb): http://storage.googleapis.com/androiddevelopers/preview/l-developer-preview-reference.zip
Set up android l: https://developer.android.com/preview/setup-sdk.html
Camera
HAL3:https://source.android.com/devices/camera/camera3.html
HAL Subsystem https://source.android.com/devices/camera/camera3_requests_hal.html
https://source.android.com/devices/camera/camera.html
React Js Basic Details and Descriptions
Frontend Javascript Library, to make decent SPA
The fastest way to build a segregated component based front end for software development.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
We'll take a look at setting up Shopware PWA, as well as how to create a plugin that fetches product recommendations. All without touching the Shopware Backend.
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
Map(), flatmap() and reduce() are your new best friends: simpler collections,...Chris Richardson
Higher-order functions such as map(), flatmap(), filter() and reduce() have their origins in mathematics and ancient functional programming languages such as Lisp. But today they have entered the mainstream and are available in languages such as JavaScript, Scala and Java 8. They are well on their way to becoming an essential part of every developer’s toolbox.
In this talk you will learn how these and other higher-order functions enable you to write simple, expressive and concise code that solve problems in a diverse set of domains. We will describe how you use them to process collections in Java and Scala. You will learn how functional Futures and Rx (Reactive Extensions) Observables simplify concurrent code. We will even talk about how to write big data applications in a functional style using libraries such as Scalding.
Slidedeck used to give an introduction to WebXR. It also contains the slides for a short introduction to WebVR using A-Frame and Glitch.me by showing the HTML and JavaScript.
Today, desirability of products is manufactured by a brand – messages from an army of advertisers and companies spending billions of euros yearly to create a perception of desirability in their products or services. Tomorrow, the desirability of products will be more about the relationship created between an object and consumer – conversations before, during and after purchase that reflect the understanding of each other’s needs.
This talk explores desirability in the age of connected products – a provocation on designing for form, interaction and tone of voice when products can speak for themselves.
RÉFLEXIONS SUR LA CONSTRUCTION ET LE PILOTAGE D’UN PROJET OPEN
SOURCE
Cette publication, résultat d'un foisonnement intellectuel intense ayant duré plus d'une année,
représente à la fois une vulgarisation, un partage d'expérience et de préconisations quant à
l'usage de l'Open Source.
Les Logiciels Libres – ou Open Source – sont aujourd'hui couramment – si ce n'est systématiquement – utilisés
dans l'industrie de l'informatique (édition, intégration, système embarqué, etc.). Il est même possible d'affirmer,
sans langue de bois, qu'ils font partie intégrante de ces métiers : quel chef de projet ne s'est jamais posé la
question de la réutilisation d'un Logiciel Libre ? Quel client ne s'est pas vu proposer des solutions basées – au
moins en partie – sur des composants sous licence Open Source ?
Presentation at the 13th International Free Software Forum, Sao Paulo, Brazil. Abstract: In Latin America, it’s well-understood that Brazil was pioneering in considering FOSS to be both a strategy and a tool for regional economic development. But what about the rest of the world? As FOSS/OSS enters the mainstream of industry, how are countries in Europe and Asia looking at this disruptive force in software development? And what is happening in the United States where one could argue a very strong proprietary software industry is reinventing itself, with the U.S. government both following and leading the open development model?
This talk discusses FOSS from the perspective of open information technology ecosystems and government’s role in them, providing a picture of the changing landscape of software industries and the potential for localized economic benefit to those participating. It includes a perspective of how governments are experimenting with becoming more directly involved with the open source community, and to learn from them. Stories and examples are drawn for the speakers experience, research and direct involvement with government, academic and industry bodies creating exemplary projects and reference models for others to consider.
Using the CC BY license, Workshop for 2013 OPEN Kick-offJane Park
Summary of session from OPEN Kickoff Conference for DOL TAACCCT Round 2 Grantees: This session will dive into detail about the CC BY licensing requirement and what it takes to apply the license to grantee materials. CC will go over the CC license chooser tool, examples of good license implementation, and content-sharing platforms where you can upload resources under the CC BY license. If enough time and interest, CC will also go over best practices for giving attribution to the creators of CC licensed works, especially as part of a larger resource, such as a textbook or course.
More info: http://open4us.org/events/
The Remix Cycle is a framework for looking at sustainability as a media creator. Remix-it, Share-it, and Prof-it (and then back again, as the cylce goes on and on)
Some slides on how museums and related cultural heritage institutions are using Creative Commons to...
1) Share their digital collections
2) Share collection records
3) Engage users and artists, thereby tapping into new communities of stakeholders
...ultimately increasing their impact and reach beyond one entity's website or physical presence.
Note: Photo on Slide 56 is CC BY 4.0 by Frida Gregersen, not SMK.
1. Introduction to the Startup Ecosystem
2. Startups in Hong Kong
3. Community builders
4. Government support & Universities
5. Incubator and Accelerator Programs
6. Competitions, events
7. Talent's corner
8. Co-working spaces
9. Venture Capital
10. Resources
11. References
Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Domenic Denicola
This talk takes a deep dive into asynchronous programming patterns and practices, with an emphasis on the promise pattern.
We go through the basics of the event loop, highlighting the drawbacks of asynchronous programming in a naive callback style. Fortunately, we can use the magic of promises to escape from callback hell with a powerful and unified interface for async APIs. Finally, we take a quick look at the possibilities for using coroutines both in current and future (ECMAScript Harmony) JavaScript.
A brief overview of key strategies organizations use when integrating Creative Commons into their business model. Strategies describe ways in which organizations can do this to become more sustainable.
Presentation given at OEGlobal 17 March 9, 2017 in Cape Town
asmt7/~$sc_210_-_assignment_7_fall_15.doc
asmt7/cosc_210_-_assignment_7_fall_15.doc
COSC 210 - Object Oriented Programming
Assignment 7
The objectives of this assignment are to:
1) Gain further understanding and experience with inheritance.
2) Gain understanding and experience with polymorphism.
3) Gain further understanding and experience with interfaces.
4) Gain understanding and experience with low level graphics.
5) Modify an existing program to meet new requirements applying concepts of objectives 1 through 4.
6) Gain experience with medium-size Java program.
7) Continue to practice good programming techniques.
AFTER YOU HAVE COMPLETED, create a zip file named [your name]Assignment7.zip containing your entire project. Upload the .zip file to Moodle. Printout all source files you created or modified. Include a screen shot of the editor with boxes, ellipses, lines and images shown in the editor. Turn-in all printouts.
COSC 210 – Fundamentals of Computer Science
Assignment 7 Problem Statement
Updated
On the tomcat drive in folder cosc210 you will find file named PainterStartup.zip. This file contains the source code for the start of a Painter program. In its current state, Painter can create boxes and text objects at given locations. Both boxes and text objects can be repositioned and resized using a mouse. The task is to add to the program the implementation for an ellipse, line, image, and group objects.
Instructions:
1) Add an ellipse object. An ellipse is very similar in implementation as the box, except it renders an oval instead of a rectangle. The ellipse can be repositioned by dragging the object to a new location. The ellipse can be resized by first clicking over the ellipse to display grab handles and then dragging a grab handle to a new position. The grab handles are to be rendered at the same positions as the box. Likewise, clicking anywhere in the smallest rectangle that encloses the ellipse performs selection.
2) Add a Line object. A Line is to be created by selecting a Line tool and then click and drag over the canvas. The line is rendered from the point of the initial click to the mouse pointer. On releasing the mouse the construction of the line object is completed. Have the Line object inherit from PtrDrawAbstractAreaObject. Thus it will have only two grab handles.
A Line is selected by clicking anywhere over the line. Right now if you click anywhere in the rectangular region hold the line, then the line is selected. To accomplish this task, override the isOver method in PtrDrawAbstractAreaObject.
Given below is a partial solution to determine if a mouse click position (the x and y parameters to the isOver method) is over a line:
double ratio = (double) getWidth() / (double) getHeight();
if (Math.abs((x - getX()) * ratio) - (y - getY()) <= 1) {
return true;
}
You need to modify this code when the y to x ratio is less than -1 or greater than 1. (Hint: Inverse the r ...
SVGo is a Go programming language library for generation of SVG. The talk discusses the design of the library, the concept of sketching in code, and the development of visualizations and tools.
After a short introduction to object orientation, this lecture gives an overview of the Smalltalk programming language.
This lecture was given on November 10, 2008, during the summer school on programming languages (http://pleiad.dcc.uchile.cl/pl2008/)
This is complete JavaScript framework for building 3D games and experiences with HTML5, WebGL, WebVR and Web Audio (https://www.babylonjs.com). BabylonJS' basic concepts are explained and illustrated based on a handson lab provided by Mozilla.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
Climate Impact of Software Testing at Nordic Testing DaysKari Kakkonen
My slides at Nordic Testing Days 6.6.2024
Climate impact / sustainability of software testing discussed on the talk. ICT and testing must carry their part of global responsibility to help with the climat warming. We can minimize the carbon footprint but we can also have a carbon handprint, a positive impact on the climate. Quality characteristics can be added with sustainability, and then measured continuously. Test environments can be used less, and in smaller scale and on demand. Test techniques can be used in optimizing or minimizing number of tests. Test automation can be used to speed up testing.
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
GraphSummit Singapore | The Art of the Possible with Graph - Q2 2024Neo4j
Neha Bajwa, Vice President of Product Marketing, Neo4j
Join us as we explore breakthrough innovations enabled by interconnected data and AI. Discover firsthand how organizations use relationships in data to uncover contextual insights and solve our most pressing challenges – from optimizing supply chains, detecting fraud, and improving customer experiences to accelerating drug discoveries.
2. Who am I?
@kangax
perfectionkills.com kangax.github.com/es5-compat-table/
3. fabric.js
Fabric.js is a framework
that makes it easy to work
with HTML5 canvas element.
It is an interactive object model
on top of canvas element.
It is also an SVG-to-canvas parser.
4. t
ian
Canvas? -co
m pl
WHATWG says:
“The canvas element provides scripts with
a resolution-dependent bitmap canvas,
which can be used for rendering graphs,
game graphics, or other visual images on
the fly.”
http://www.whatwg.org/specs/web-apps/current-work/
multipage/the-canvas-element.html#the-canvas-element
12. But wait, there’s more!
Object manipulations with mouse
http://kangax.github.com/fabric.js/test/demo/
13. Goals
• Unit tested (1000+ tests at the moment)
• Modular (~20 small "classes")
• Cross-browser (degrades gracefully)
• Fast
• Encapsulated in one object
• No browser sniffing
• ES5 strict mode -ready
14. Supported browsers
• Firefox 2+
• Safari 3+
• Opera 9.64+
• Chrome (all versions should work)
• IE9 (IE7/8 via excanvas)
15. How fabric works
“Hello world” example
var canvas = new fabric.Element('canvas');
var text = new fabric.Text('hello world', {
fontfamily: 'delicious_500'
});
canvas.add(text);
16. How fabric works
“Hello world” example
var canvas = new fabric.Element('canvas');
var text = new fabric.Text('hello world', {
fontfamily: 'delicious_500'
});
canvas.add(text);
text.setText('trololololo')
.set('left', 100)
.set('top', 100)
.set('fontfamily', 'comic_sans');
17. How fabric works
“Hello world” example
var canvas = new fabric.Element('canvas');
var text = new fabric.Text('hello world', {
fontfamily: 'delicious_500'
});
canvas.add(text);
text.setText('trololololo')
.set('left', 100)
.set('top', 100)
.set('fontfamily', 'comic_sans');
canvas.remove(text);
19. How fabric works
“Class” hierarchy
fabric.Object clone
cloneAsImage
complexity
get
fabric.Line getCenter
fabric.Circle getWidth
fabric.Triangle getHeight
intersectsWithObject
fabric.Ellipse isActive
fabric.Rect isType
fabric.Polyline scale
scaleToHeight
fabric.Polygon scaleToWidth
fabric.Group set
fabric.Text setActive
straighten
fabric.Image toDataURL
fabric.Path toJSON
...
20. How fabric works
“Class” hierarchy
clone
fabric.Object cloneAsImage
complexity
get
getCenter
fabric.Line getRadiusX
fabric.Circle getRadiusY
fabric.Triangle getWidth
getHeight
fabric.Ellipse intersectsWithObject
fabric.Rect isActive
fabric.Polyline isType
scale
fabric.Polygon scaleToHeight
fabric.Group scaleToWidth
fabric.Text set
setActive
fabric.Image straighten
fabric.Path toDataURL
toJSON
...
21. How fabric works
“Class” hierarchy
clone
fabric.Object cloneAsImage
complexity
get
getCenter
fabric.Line getWidth
getElement
fabric.Circle getHeight
fabric.Triangle intersectsWithObject
fabric.Ellipse isActive
isType
fabric.Rect scale
fabric.Polyline scaleToHeight
fabric.Polygon scaleToWidth
set
fabric.Group setActive
fabric.Text setElement
fabric.Image straighten
toDataURL
fabric.Path toJSON
toGrayscale
...
22. How fabric works
fabric.Element
add
bringForward
fabric.Element bringToFront
centerObjectH
centerObjectV
clear
clone
Main drawing area complexity
containsPoint
deactivateAll
- Wraps <canvas> element getActiveObject
- Renders fabric.* objects added to it getCenter
- Provides mouse-based selection getHeight
getWidth
- Dispatches events getObjects
insertAt
isEmpty
item
loadFromJSON
loadSVGFromURL
remove
renderAll
...
23. How fabric works
fabric.Element
render()
fabric.Rect.prototype.render render()
fabric.Path.prototype.render
render()
render() fabric.Image.prototype.render
fabric.Circle.prototype.render
24. How fabric works
Drawing a frame
1. clear entire canvas
2. for each object in canvas
2a. object.render()
render() render()
fabric.Rect.prototype.render fabric.Path.prototype.render
render()
render() fabric.Image.prototype.render
fabric.Circle.prototype.render
25. How fabric works
Prototypal inheritance
function createClass() {
var parent = null,
based on
properties = slice.call(arguments, 0); Prototype.js
if (typeof properties[0] === 'function') {
parent = properties.shift();
}
function klass() {
this.initialize.apply(this, arguments);
}
klass.superclass = parent;
klass.subclasses = [ ];
if (parent) {
subclass.prototype = parent.prototype;
klass.prototype = new subclass;
parent.subclasses.push(klass);
}
for (var i = 0, length = properties.length; i < length; i++) {
addMethods(klass, properties[i]);
}
if (!klass.prototype.initialize) {
klass.prototype.initialize = emptyFunction;
}
klass.prototype.constructor = klass;
return klass;
}
30. How fabric works
SVG parser
fabric.Path.prototype.render (line 173)
case 'C': // bezierCurveTo, absolute
x = current[5]; {
y = current[6]; path: [
controlX = current[3]; [ "M", -122.304, 84.285 ],
controlY = current[4]; [ "C", -122.304, 84.285,
ctx.bezierCurveTo( -122.203, 86.179,
current[1] + l,
current[2] + t, -123.027, 86.16 ],
controlX + l, [ "C", -123.851, ... ],
controlY + t, [ ... ],
x + l, ...
y + t ]
); }
break;
31. How fabric works
SVG parser
Static fromElement method on all constructors
fabric.Line.fromElement = function(element, options) {
var parsedAttributes = fabric.parseAttributes(element,
fabric.Line.ATTRIBUTE_NAMES);
var points = [
parsedAttributes.x1 || 0,
parsedAttributes.y1 || 0,
parsedAttributes.x2 || 0,
parsedAttributes.y2 || 0
];
return new fabric.Line(points,
extend(parsedAttributes, options));
};
32. How fabric works
SVG parser
Static fromElement method on all constructors
fabric.Path.fromElement = function(element, options) {
var parsedAttributes = fabric.parseAttributes(element,
fabric.Path.ATTRIBUTE_NAMES);
return new fabric.Path(parsedAttributes.d,
extend(parsedAttributes, options));
};
Ditto for fabric.Rect, fabric.Circle, etc.