I didnt understang how to create three figures with the same size, but difrent color.
help is needed in correctly putting the names of functions and other things, I myself do not know how to do it correctly.
HTML FILE it only needs to be edited in DIV CLASS=”BOX”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEST</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<div class="data_list">
<div class="data_item rect" draggable="true" ondragstart="onDragstart('rect')"></div>
<div class="data_item rectgreen" draggable="true" ondragstart="onDragstart('rect')"></div>
<div class="data_item rectred" draggable="true" ondragstart="onDragstart('rect')"></div>
</div>
<canvas id="c" style="border: 2px solid #ccc;"></canvas>
</div>
<script src="fabric.js"></script>
<script src="index.js"></script>
</body>
</html>
CSS FILE it okay
.box {
display: flex;
}
.data_list {
width: 100px;
margin-left: 10px;
}
.data_item {
width: 60px;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.data_item {
width: 60px;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.data_item {
width: 60px;
height: 40px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
js file it is need to be edit at switch (currentType) and function create
let currentElType = null
let canvas = null
function initCanvas() {
canvas = new fabric.Canvas('c', {
width: 1000,
height: 700
})
canvas.on('mouse:down', function (opt) {
var evt = opt.e;
if (evt.altKey === true) {
this.isDragging = true
this.lastPosX = evt.clientX
this.lastPosY = evt.clientY
}
})
canvas.on('mouse:move', function (opt) {
if (this.isDragging) {
var e = opt.e;
var vpt = this.viewportTransform;
vpt[4] += e.clientX - this.lastPosX
vpt[5] += e.clientY - this.lastPosY
this.requestRenderAll()
this.lastPosX = e.clientX
this.lastPosY = e.clientY
}
})
canvas.on('mouse:up', function (opt) {
this.setViewportTransform(this.viewportTransform)
this.isDragging = false
})
canvas.on('mouse:wheel', opt => {
const delta = opt.e.deltaY
let zoom = canvas.getZoom()
zoom *= 0.999 ** delta
if (zoom > 20) zoom = 20
if (zoom < 0.01) zoom = 0.01
canvas.zoomToPoint(
{
x: opt.e.offsetX,
y: opt.e.offsetY
},
zoom
)
})
}
initCanvas()
function onDragstart(type) {
currentType = type
}
canvas.on('drop', function(opt) {
let offset = {
left: canvas.getSelectionElement().getBoundingClientRect().left,
top: canvas.getSelectionElement().getBoundingClientRect().top
}
let point = {
x: opt.e.x - offset.left,
y: opt.e.y - offset.top,
}
let pointerVpt = canvas.restorePointerVpt(point)
switch (currentType) {
case 'rect':
createRect(pointerVpt.y, pointerVpt.x)
break
case 'rect':
createRectGreen(pointerVpt.y, pointerVpt.x)
break
case 'rect':
createRectRed(pointerVpt.y, pointerVpt.x)
break
}
currentElType = null
})
function createRect(top, left) {
canvas.add(new fabric.Rect({
top,
left,
width: 60,
height: 40,
fill: 'blue'
}))
}
function createRectGreen(top, left) {
canvas.add(new fabric.Rect({
top,
left,
width: 60,
height: 40,
fill: 'green'
}))
}
function createRectRed(top, left) {
canvas.add(new fabric.Rect({
top,
left,
width: 60,
height: 40,
fill: 'red'
}))
}
I just try to make figures with the same title in js
