Top 10 Examples of "fabric in functional component" in JavaScript
Dive into secure and efficient coding practices with our curated list of the top 10 examples showcasing 'fabric' in functional components in JavaScript. Our advanced machine learning engine meticulously scans each line of code, cross-referencing millions of open source libraries to ensure your implementation is not just functional, but also robust and secure. Elevate your React applications to new heights by mastering the art of handling side effects, API calls, and asynchronous operations with confidence and precision.
server.listen(settings.port, function() {
moment.locale(settings.language)
app.engine('handlebars', exphbs({defaultLayout: 'main'}))
app.set('view engine', 'handlebars')
app.dayOftheWeek = parseInt(moment().format('e'), 10)
app.fabric = require('fabric').fabric
GLOBAL.fabric = app.fabric
common.init(app)
app.db = new loki('db.json', {
autosave: true,
autosaveInterval: 3000,
autoload: true,
autoloadCallback: function() {
// if database did not exist it will be empty so I will intitialize here
var collection = app.db.getCollection('paths')
if (!collection) {
collection = app.db.addCollection('paths', {indices: ['uuid']})
collection.ensureUniqueIndex('uuid')
}// TODO 工具栏激活状态
if (process.env.NODE_ENV !== 'production') {
require('./index.html')
}
const fabric = require('fabric').fabric
const { SaveImage } = require('./saveImage')
const { Config } = require('./config.js')
let canvas
// const socket = io.connect(`http://${Config.ws.host}:${Config.ws.port}`)
// // 监听绘画新状态
// socket.on('drawListen', (msg) => {
// // console.log('收到监听， drawListen')
// // console.log(msg)
// canvas.loadFromJSON(msg)
// })
// push已修改的状态
let HandleCanvasUpdate = (canvas) => {
// // TODO 发送到服务端的话需要做序列号, 需要优化算法（不然这样服务器吃不消啊）function drawing() {
let canvasObject = null
// console.log(drawType)
// console.log(drawWidth)
if (drawType == 'handle') {
return
}
// 清理历史滑动痕迹
if (drawingObject) {
canvas.remove(drawingObject)
}
switch (drawType) {
case "line": {
canvasObject = new fabric.Line([mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], {
stroke: color,
strokeWidth: drawWidth
})
break
}
case "rectangle": {
let left = mouseFrom.x,
top = mouseFrom.y,
width = mouseTo.x - mouseFrom.x,
height = mouseTo.y - mouseFrom.y
canvasObject = new fabric.Rect({
left: width > 0 ? left : left + width,
top: height > 0 ? top : top + height,
width: Math.abs(width),
height: Math.abs(height),`L ${ +width/2 + 10 } ${ -height/2 - 10 } ` +
`L ${ -width/2 - 10 } ${ -height/2 - 10 } z ` +
// Lines are offset here to make them sharp
`M ${ -viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } ` +
`L ${ +viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } ` +
`L ${ +viewPort[0]/2 - 0.5 } ${ +viewPort[1]/2 - 0.5 } ` +
`L ${ -viewPort[0]/2 - 0.5 } ${ +viewPort[1]/2 - 0.5 } ` +
`L ${ -viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } z`
)
console.log('width/height', width, height)
vp.setOptions({ fill: 'rgba(255, 255, 255, 0.6)' })
overlay.add(vp)
// Draw viewPort border ------------------------------------------------------
overlay.add(new fabric.Rect({
width: viewPort[0] + 1,
height: viewPort[1] + 1,
left: -viewPort[0]/2 - 1,
top: -viewPort[1]/2 - 1,
fill: 'transparent',
stroke: 'rgba(0, 0, 0, 0.125)',
}))
return overlay
}let curZoom = this.zoomFactor;
let cursor, delta;
if (zoomIn) {
cursor = 'zoom-in';
delta = 1.1;
//this.scalePoints(.95);
} else {
cursor = 'zoom-out';
delta = .95
//this.scalePoints(1.1);
}
this.zoomFactor *= delta;
console.log(cursor);
// canvas.defaultCursor = cursor;
// canvas.hoverCursor = cursor;
canvas.zoomToPoint(new fabric.Point(
e.e.offsetX, e.e.offsetY), this.zoomFactor);
//this.resetCursors();
// let obj = e.target;
// if (obj !== undefined
// && obj !== null
// && this.polygonClicks.length > 0
// && obj === this.polygonClicks[0]) {
// obj.set({
// stroke: 'green',
// fill: 'green',
// });
// canvas.renderAll();
// }
},export default (width, height, viewPort) => {
const overlay = new fabric.StaticCanvas()
overlay.setDimensions({
width: width + 20, height: height + 20,
})
// Transform coordinate system
overlay.setViewportTransform([
1, 0, 0, 1,
width/2 + 10, height/2 + 10
])
// Draw viewport margin ------------------------------------------------------
const vp = new fabric.Path(
`M ${ -width/2 - 10 } ${ -height/2 - 10 } ` +
`L ${ -width/2 - 10 } ${ +height/2 + 10 } ` +
`L ${ +width/2 + 10 } ${ +height/2 + 10 } ` +
`L ${ +width/2 + 10 } ${ -height/2 - 10 } ` +
`L ${ -width/2 - 10 } ${ -height/2 - 10 } z ` +
// Lines are offset here to make them sharp
`M ${ -viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } ` +
`L ${ +viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } ` +
`L ${ +viewPort[0]/2 - 0.5 } ${ +viewPort[1]/2 - 0.5 } ` +
`L ${ -viewPort[0]/2 - 0.5 } ${ +viewPort[1]/2 - 0.5 } ` +
`L ${ -viewPort[0]/2 - 0.5 } ${ -viewPort[1]/2 - 0.5 } z`
)
console.log('width/height', width, height)
vp.setOptions({ fill: 'rgba(255, 255, 255, 0.6)' })
overlay.add(vp)export default (gridSize, offsetX, offsetY) => {
// Correct for high-DPI devices
const size = gridSize / window.devicePixelRatio
// FIXME: Non-integer values break things
console.log('Background grid size', size)
// Create a single tile
const backgroundTile = new fabric.StaticCanvas()
backgroundTile.setDimensions({
width: size, height: size,
})
// The grid needs to be filled in all four corners,
// for one pixel each
Array(4).fill().forEach((_, i) => {
const [x, y] = [i % 2 * size, Math.floor(i / 2) * size]
backgroundTile.add(new fabric.Rect({
width: 1, height: 1,
// FIXME: This is a hack, and it breaks down
// when adding window scaling
left: x - 1 + (offsetX / window.devicePixelRatio),
top: y - 1 + (offsetY / window.devicePixelRatio),
fill: 'rgba(0, 0, 0, 0.125)',
}))}).exec().then((chunk) => {
// if nothing exists a cell with null data returns.
if (chunk != null) {
const tempCanvas = fabric.createCanvasForNode(CANVAS_SIZE, CANVAS_SIZE);
tempCanvas.loadFromJSON(chunk.data, (done) => {
const dataUrl = tempCanvas.toDataURL({ width: CANVAS_SIZE, height: CANVAS_SIZE });
const modPng = dataUrl.substring(22, dataUrl.length);
//console.log(modPng);
sharp(new Buffer(modPng, "base64"))
.resize(size, size)
.toBuffer()
.then(result => {
debug(`done resize png ${x},${y}`);
//console.log(`png update done ${x},${y}`)
paintPngController.paintpng_save(x, y, size, result.toString("base64")).then(() => {
//debug(result);
debug(`done update png ${x},${y}`)
});
//pngs[`${x},${y}`] = result.toString("base64");
}).catch(err => { debug(err) });}).exec().then((chunk) => {
// if nothing exists a cell with null data returns.
if (chunk != null) {
chunks[`${x},${y}`] = fabric.createCanvasForNode(CANVAS_SIZE, CANVAS_SIZE);
chunks[`${x},${y}`].loadFromJSON(chunk.data, (done) => {
resolve(chunks[`${x},${y}`]);
});
} else {
resolve("chunk is null");
//no chunk data from database
//console.log("chunk is null");
}
}, (err) => {
debug(err);fabric.Image.fromObject = function(_object, callback) {
var object = fabric.util.object.clone(_object)
fabric.util.loadImage(object.src, function(img, error) {
// Substitute empty image in case of error
const image = new fabric.Image(
error ? new Image() : img,
object
)
image.crossOrigin = "anonymous"
// Pretend that we were successful in any case
callback(image)
})
}