I have these sliders that will allow the shape to move over the canvas as well as change its width and height, but when I change the width or height of a shape its nodes that resize the shape increase in a different way then its should.
more over I am also looking for a way to do change in width and height in a way that the shapes area remain same, I was using boundBoxFunc for that but not able to pick the exact shape that I want.
I am trying to resize the rectangle using a input field such that when I change the width in input field it will change width of the rectangle.
function resizeRect(shape, layer, stage) {
var anchors = [];
anchors[rect1._id] = ['top-center', 'middle-right', 'middle-left', 'bottom-center'];
const MIN_HEIGHT = height[0]
const MAX_HEIGHT = height[1]
const MIN_WIDTH = width[0]
const MAX_WIDTH = width[1]
const tr = new Konva.Transformer({
nodes: [shape],
ignoreStroke: true,
padding: 5,
boundBoxFunc: function(oldBoundBox, newBoundBox) {
// Looking for a way to make this avaiable only for certain shapes (Like I have 4 shapes two rectangle and two group rectangle in l-shaped)
if (oldBoundBox.width != newBoundBox.width && oldBoundBox.height == newBoundBox.height) {
// console.log("change in width")
// pick shape if its rect1 change width also when changing height so equal area
} else {
// console.log("change in height")
// pick shape if its rect1 change height also when changing width so equal area
}
return newBoundBox;
},
});
tr.rotateEnabled(false);
tr.nodes([])
stage.on('click tap', function(e) {
if (e.target.getName() == '') {
tr.nodes([]);
return;
}
const keyPressed = e.evt.shiftKey || e.evt.ctrlKey;
const isSelected = tr.nodes().indexOf(e.target) >= 0;
tr.enabledAnchors(anchors[e.target._id]);
if (!keyPressed && !isSelected) {
tr.nodes([e.target]);
} else if (keyPressed && isSelected) {
const nodes = tr.nodes().slice();
nodes.splice(nodes.indexOf(e.target), 1);
tr.nodes(nodes);
}
});
layer.add(tr);
}
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'canvas',
width: 512, // 4 CM = 128 PX/CM
height: 896, // 7 CM = 128 PX/CM
});
var layer = new Konva.Layer();
// Inner Items
rect1X = 210;
rect1Y = 300;
rect1Width = 31;
rect1Height = 190;
$('#coil_1_x').val(rect1X)
$('#coil_1_y').val(rect1Y)
$('#coil_1_width').val(rect1Width)
$('#coil_1_height').val(rect1Height)
var rect1 = new Konva.Rect({
x: rect1X,
y: rect1Y,
width: rect1Width,
height: rect1Height,
name: 'rect1',
fill: '#ec8e8e',
stroke: '#ec8e8e',
strokeWidth: 2,
draggable: true
});
rect1.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
rect1.on('mouseout', function() {
document.body.style.cursor = 'default';
});
rect1.on('dragmove', function() {
targetRect = rect1.getClientRect();
$('#coil_1_x').val(targetRect.x)
$('#coil_1_y').val(targetRect.y)
});
var oldRect1 = '';
rect1.on('transformstart', () => {
oldRect1 = { ...rect1
};
})
rect1.on('transform', function() {
targetRect = rect1.getClientRect();
rect1.setWidth(rect1.width() * rect1.scaleX());
rect1.setHeight(rect1.height() * rect1.scaleY());
$('#coil_1_width').val(Math.round(targetRect.width));
$('#coil_1_height').val(targetRect.height);
rect1.scaleX(1);
rect1.scaleY(1);
});
$('#coil_1_x').keyup(function() {
rect1.setX($(this).val());
});
$('#coil_1_y').keyup(function() {
rect1.setY($(this).val());
});
$('#coil_1_width').keyup(function() {
rect1.setWidth($(this).val());
// if i do the changes in scaleX we got something like a really big width in thousands
});
$('#coil_1_height').keyup(function() {
rect1.setHeight($(this).val());
});
layer.add(rect1);
resizeRect(rect1, layer, stage);
stage.add(layer);body {
font-family: system-ui;
background: black;
color: white;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="main-container" class="container">
<div class="row">
<div class="col-md-1"></div>
<div id="canvas" class="col-md-6"></div>
<div id="slider" class="col-md-4">
<div class="row">
<div class="col-md-6">
<h3>Slider</h3>
</div>
</div>
<hr>
<div class="row">
<div class="form-group col-md-6">
<label for="">Coil 1 X (Red)</label>
<input type="number" class="form-control" id="coil_1_x">
</div>
<div class="form-group col-md-6">
<label for="">Coil 1 Y</label>
<input type="number" class="form-control" id="coil_1_y">
</div>
<div class="form-group col-md-6">
<label for="">Coil 1 Width</label>
<input type="number" class="form-control" id="coil_1_width">
</div>
<div class="form-group col-md-6">
<label for="">Coil 1 Height</label>
<input type="number" class="form-control" id="coil_1_height">
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
<script src="https://unpkg.com/konva@9/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>