I am trying to create custom share a circle and BIN inside that circle to use as button.
but context.circle is not working in documention they mentioned, rect, circle, text.. we can use with custom shape.
Please letme know what is the issue, is it bug or something i am missing.
var rect = new Konva.Shape({
x: 10,
y: 20,
fill: '#00D2FF',
radius: 10,
sceneFunc: function (context, shape) {
context.beginPath();
context.circle(0, 0, 5);
context.fillStrokeShape(shape);
},
});
context argument is a wrapper around 2D native canvas context https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.
You should use its methods to make drawings. In your case you may need context.arc: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc
Related
I'm currently following this guide to select shapes in the stage and put them inside a Transformer.
If possible, I'd like to drag an entire Transformer with all of its content without touching any of the shapes inside.
For example, I have two lines that are far from each other. Both of them are nodes inside a Transformer and can be dragged as long as I click one of those 2 lines. However, if I tried to drag from any of the empty area inside the Transformer nothing would happen (or the transformer would reset, depending on the code).
I'm thinking of adding a transparent Rect (this Rect will always have the same size as the Transformer) to the Transformer and then add any other shape that I want inside the Transformer. Since both the Rect and the Transformer have the same size, I could easily drag the entire Transformer from any "empty area" where my other shapes are not located.
I'm not sure if this is the correct/efficient way to do it. How should I tackle this issue to obtain the best outcome?
There is an experimental property shouldOverdrawWholeArea for Konva.Transformer. It is not in the docs yet.
If you set it to true the whole transformer area will be available for drag.
But if you have a transformer on top of other shapes, then shapes will be not listening for regular events (such as click, touchstart etc). Because the transformer rectangle will overdraw hit area of attached shapes. Even will start working as soon, as you remove such a transformer from them.
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth - 20,
height: window.innerHeight - 20
});
const layer = new Konva.Layer();
stage.add(layer);
const shape1 = new Konva.Circle({
x: 70,
y: 70,
radius: 50,
fill: 'green'
});
layer.add(shape1);
const shape2 = shape1.clone({
x: 190,
y: 90
})
layer.add(shape2);
const tr = new Konva.Transformer({
nodes: [shape1, shape2],
shouldOverdrawWholeArea: true
});
layer.add(tr);
layer.draw();
<script src="https://unpkg.com/konva#7.0.3/konva.min.js"></script>
<div id="container"></div>
Im just trying to let my user take a screenshot using the toDataUrl() function.
but, without a background rectangle, all pixel are transparent , and appear black .
so the solution is to dynamicly add a rectangle, generate the image, destroy the rectangle
saveImage(){
const stage=this.$parent.$refs.stage.getStage()
var stageRect = new Konva.Rect({
x:0,
y:0,
width: stage.attrs.width,
height: stage.attrs.height,
fill: 'green',
})
console.log(stage)
const backg=new Konva.Layer();
backg.add(stageRect)
stage.add(backg)
backg.setZIndex(0)
const dataURL = stage.toDataURL({ pixelRatio: 1, mimeType:"image/png" });
backg.destroy();
this.downloadURI(dataURL, 'stage.png');
},
it works (rectangle is created before all other layer) but... i can't get the size of the stage, i mean, the viewport because the user can zoom/dezoom the stage ....
any idea ?
Just use a scale to calculate background properties:
var stageRect = new Konva.Rect({({
x: -stage.x()/ stage.scaleX(),
y: -stage.y()/ stage.scaleY(),
width: stage.width() / stage.scaleX(),
height: stage.height() / stage.scaleY(),
fill: 'green',
});
Demo: https://jsbin.com/lehasitaje/2/edit?html,js,output
I have an 850x600px Konva stage, and a picture created with lots of SVG images. I want to try to scale down the whole stage/layer/group for it to fit in a phone screen.
I´ve tried to set the scale to less than 1 (Example: 0.5) but I don´t seem to get it to work.
Which would be the best approach to achieve this?
Config example:
var stage = new Konva.Stage({
container: 'container',
width: 850,
height: 600,
scale: 0.5
});
You can't set scale to 0.5. You need to use:
scale: {x: 0.5, y: 0.5}
Or you can use this:
scaleX: 0.5,
scaleY: 0.5
Note: I am going to add a warning for invalid values for scale and some other properties in Konva v3.
What I am trying to achieve is showing the transformer around the custom shape itself. I took the code directly from the API docs for creating the custom shape and adding the transformer. The transformer works great for rectangles, circles, etc but for custom shapes, it doesn't seem to appear properly.
Here is a link to a demo app with the issue with custom shapes and transformer:
https://jsfiddle.net/5zpua740/
var stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Konva.Layer();
/*
* create a triangle shape by defining a
* drawing function which draws a triangle
*/
var triangle = new Konva.Shape({
sceneFunc: function (context) {
context.beginPath();
context.moveTo(120, 150);
context.lineTo(320, 180);
context.quadraticCurveTo(250, 200, 360, 270);
context.closePath();
// Konva specific method
context.fillStrokeShape(this);
},
fill: '#00D2FF',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
// add the triangle shape to the layer
layer.add(triangle);
// add the layer to the stage
stage.add(layer);
stage.on('click', function (e) {
// if click on empty area - remove all transformers
if (e.target === stage) {
stage.find('Transformer').destroy();
layer.draw();
return;
}
// remove old transformers
// TODO: we can skip it if current rect is already selected
stage.find('Transformer').destroy();
// create new transformer
var tr = new Konva.Transformer();
layer.add(tr);
tr.attachTo(e.target);
layer.draw();
})
In this sample, you can see that if you click on the object, the transformer appears in the corner. You can still use it to manipulate the object but it's not around the object itself.
Any help appreciated! Thanks in advance.
Konva can't detect bounding box of a custom shape. But we can simply help it. We just need to define a method getSelfRect.
The method should return bounding box of a shape without transforming applied (like the shape has no rotation, no scaling and placed in x =0, y=0).
We can do this by just looking at sceneFunc:
triangle.getSelfRect = function() {
return {
// sceneFunc started from moving to 120, 150 point
// so it is our top left point
x: 120,
y: 150,
// the bottom right point finished with quadraticCurveTo
// I will use the coordinates to calculate size of the shape
width: 360 - 120,
height: 270 - 150
};
}
Demo: http://jsbin.com/lazuhowezi/2/edit?js,output
I have some images that are .png's with transparent backgrounds however, when they are added to the stage they have white backgrounds. Am i missing a trick here?
Each image is added like so:
var layer = new Kinetic.Layer();
var book = new Image();
book.onload=function () {
bookImg = new Kinetic.Image ({ x: 885, y: 780, offset: [85.5, 106], image:book, name:book, opacity: 0, /*scale:{x:0.5, y:0.5}*/ });
layer.add(bookImg);
stage.add(layer);
}
book.src = "images/book.png";
is it that the layer itself is what's creating the white background?
a little confused!
Cant it be that you have to set the background to transparent? Not only the picture itself but the image-object containing the image. Maybe the layer aswell.
You shouldn't need to set the opacity on a Kinetic.Image() object. If you want it to be invisible, either initially or after being placed, simply use hide() (and subsequently show() to re-show it). Or set visible to false in the parameters. The minimum needed to place an image on the stage looks like this:
var image = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 300,
height: 120
});
layer.add(image);
layer.draw();
This assumes your layer has already been added to a Kinetic.Stage() and the image has loaded ( imageObj.onload = function(){} ). Including a name is fine, the offset and opacity (and even scale) are valid key/value pairs for parameters but not really necessary when creating the image. These can always be set after the image has been added to the layer as well (using one of the many setters in the KineticJS library).
I'd try using a minimalist approach to see if the image shows up as intended first, then go from there.