I drew a picture in one js file in konva. When referring to elements with the same id in other js files, if there is a konva.stage in the element, I want to draw a picture there.
<div id="question></div>
first.js
const stage = new Konva.Stage({
container: 'question',
width: 300,
height: 300,
});
const layer = new Konva.Layer();
const rect = new Konva.Rect({
width: 200,
height: 200,
stroke: "#4ac5f3",
});
layer.add(rect);
stage.add(layer);
second.js
const rect = new Konva.Rect({
width: 200,
height: 200,
stroke: "#a0a0a0",
});
// layer of stage in first.js
layer.add(rect);
If I can draw by accessing the konva.stage declared in first.js in the file called second.js as above?
Related
I want to set cursor to anchor on mouse enter event.
I tried the following code, but without success
const tr = new Konva.Transformer({
nodes: [shape]
})
tr.update = function() {
Konva.Transformer.prototype.update.call(tr);
var rot = this.findOne('.rotater');
rot.on("mouseenter", () => {
stage.container().style.cursor = 'move';
})
rot.on('mouseleave', () => {
stage.container().style.cursor = 'default';
})
}
tr.forceUpdate();
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);
const shape = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 50,
fill: 'green'
});
layer.add(shape);
const tr = new Konva.Transformer({
nodes: [shape]
})
layer.add(tr);
tr.findOne('.rotater').on('mouseenter', () => {
// "content" property is not documented and private
// but for now you can use it
// it is element where transformer is applying its styles
stage.content.style.cursor = 'move';
});
<script src="https://unpkg.com/konva#^8/konva.min.js"></script>
<div id="container"></div>
I use jsPDF to generate PDF but somehow, the margin that I've set on it seems not working for pagesplit.
I tried this method but not working as well (when it comes to second page, the margin is not working): Jspdf addHTML pagesplit option is stretching the pages
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.internal.scaleFactor = 2.25;
pdf.addHTML(document.querySelector('#print'), 0, 0, {
pagesplit: true,
margin: {
top: 50,
right: 25,
bottom: 50,
left: 25,
useFor: 'page'
}
},function () {
pdf.save('print.pdf');
});
*tried this method too:
pdf.addHTML(document.querySelector('#print'), 25, 50, {
pagesplit: true,
margin: {
top: 50,
right: 25,
bottom: 50,
left: 25,
useFor: 'page'
}
},function () {
pdf.save('print.pdf');
});
Below is the result:
I am trying to get an information card (consisting of a Konva.Rect and Konva.Text) to appear below an image while hovering over it. I've tried combining the info card into a separate child group and added it to a parent group that consists of the image and the image label. The issue is that when hovering over the image the rectangle appears far off to the right rather than in the correct x,y position. How can I set the child group's coordinates such that if the image moves across the screen the info card will always appear below it?
I've tried setting the rectangle's x attribute as group.x() (where group is the parent group's x coordinate). I've also tried setting it as image.x() yet the rectangle still appears far off to the right of the parent image.
let group = new Konva.Group({
x: 100,
y: 20,
id: attr.status,
visible: ng.checkboxValues[status] ? true : false,
});
let image = new Konva.Image({
x: group.x(),
y: group.y(),
image: DOMImage,
width: 40,
height: 40,
listening: true,
visible: true,
});
let robotAlias = new Konva.Text({
x: image.x() - 20,
y: image.y() + 10,
text: attr.alias,
fontSize: 13,
fontFamily: 'Roboto',
fill: ng.colorMap[attr.status],
visible: true,
});
let complexText = new Konva.Text({
x: image.x(),
y: image.y(),
text: `${attr.alias}-${attr.status}`,
fontSize: 15,
padding: 10,
fontFamily: 'Roboto',
align: 'center',
fill: this.colorMap[attr.status],
height: 60,
width: 160,
visible: true,
});
let rect = new Konva.Rect({
x: image.x(),
y: image.y(),
stroke: '#fff',
strokeWidth: 1,
fill: '#fff',
height: 60,
width: 160,
shadowColor: 'black',
shadowBlur: 5,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
visible: true,
});
let descriptionCardGroup = new Konva.Group({
x: image.x(),
y: image.y(),
visible: false,
name: `${attr.id}`,
})
group.add(image);
group.add(robotAlias);
descriptionCardGroup.add(rect);
descriptionCardGroup.add(complexText);
group.add(descriptionCardGroup);
Here's a screenshot of the current behavior: https://ibb.co/QMYjxrw
I would like to know how to put the box in foreground and the image in background. I try moveToTop(), setZIndex() on box but when i drag it the image go to foreground.
one(){
var stage = new Konva.Stage({
container: 'container',
width: 400, height: 250
});
var layer = new Konva.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Konva.Image({
image: imageObj,
});
// yoda.setZIndex(2);
layer.add(yoda);
};
imageObj.src = '/assets/images/vert.png';
this.two(stage, layer)
}
two(stage: Konva.Stage, layer) {
var box = new Konva.Rect({
x: 20, y: 20,
width: 100, height: 50,
fill: '#00D2FF', stroke: 'black',
strokeWidth: 4,
draggable: true
});
// box.setZIndex(1); box.moveToTop()
layer.add(box);
stage.add(layer)
}
I took your code and made a plain JS working snippet so that I could experiment. See below.
You were very close with your line
// yoda.setZIndex(2);
layer.add(yoda);
except that the z-index affecting attributes work on the position of the shape in the layer. Therefore the shape MUST BE IN A LAYER for the call to work. See my code where I use
layer.add(yoda);
yoda.moveToBottom()
meaning the layer-affecting call happens AFTER adding yoda to the layer.
You may also wish to consider using multiple layers if, say, you will have many shapes that need to be on one or another layer.
var stage = new Konva.Stage({
container: 'container',
width: 400, height: 250
});
var layer = new Konva.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Konva.Image({
width: 100, height: 100,
image: imageObj,
});
layer.add(yoda);
yoda.moveToBottom(); // <<<< must add to the layer BEFORE setting the z-order.
layer.draw();
};
imageObj.src = 'https://i.stack.imgur.com/WxBvk.png';
two(stage, layer)
function two(stage, layer) {
var box = new Konva.Rect({
x: 20, y: 20,
width: 100, height: 50,
fill: '#00D2FF', stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(box);
}
stage.add(layer)
stage.draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<div id='container' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>
Can anyone elaborate the precise difference between using Konva.TextPath and Konva.Text classes?I am using Konva.js library in my project and I have searched this issue everywhere but there isn't any clear explanation regarding this.
Hope someone can help me out.Thanks!
Konva.Text is simple text on a line.
Konva.Textpath is more complex, for example it can follow a curve.
Run the snippet.
var stage = new Konva.Stage({
container: 'container',
width: 400,
height: 150
});
var layer = new Konva.Layer();
stage.add(layer);
var kerningPairs = {
'A': {
' ': -0.05517578125,
'T': -0.07421875,
'V': -0.07421875,
},
'V': {
',': -0.091796875,
":": -0.037109375,
";": -0.037109375,
"A": -0.07421875,
}
}
var textpath = new Konva.TextPath({
x: 100,
y: 20,
fill: '#333',
fontSize: '24',
fontFamily: 'Arial',
text: 'Textpath - literally text on a path.',
data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',
getKerning: function(leftChar, rightChar) {
return kerningPairs.hasOwnProperty(leftChar) ? pairs[leftChar][rightChar] || 0 : 0
}
});
layer.add(textpath)
var text = new Konva.Text({
x: 0,
y: 5,
text: 'Konva.Text = simple text.',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'green'
});
layer.add(text);
stage.draw()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>
<div id='container'></div>