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.
Related
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
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>
I'm developing iOS app and I want to add/draw an HeatMap without using Google maps or any kind of map. I just want to draw it on my View. I have been looking for an open source library for iOS but I didn't find any.
Do anyone know a way how do I draw an HeatMap on View in iOS?
Here is an example for what I'm looking for but it's for Android platform:
https://github.com/HeartlandSoftware/AndroidHeatMap
Thanks, Tal.
in github enter in search field:
language:swift heatmap
you will get:
https://github.com/jamesdouble/JDSwiftHeatMap
If anyone is still looking for a heatmap that doesn't require a MKMapView and one that you can just place over an image, you could try this cocoapod
pod 'LFHeatMap'
https://github.com/gpolak/LFHeatMap.
Before you consider it for your project just know that you can't adjust the colour gradient of the "heat" without hacking the library a little. But it's pretty easy to use:
let points: [CGPoint] = [CGPoint(x: 25, y: 25),
CGPoint(x: 125, y: 125),
CGPoint(x: 200, y: 200)]
let image = LFHeatMap.heatMap(with: CGRect(x: 0, y: 0, width: 300, height: 300),
boost: 0.5,
points: points,
weights: nil)
let overlayHeatMap = UIImageView(image: image)
self.view.addSubview(overlayHeatMap)
overlayHeatMap.frame = CGRect(x: 0, y: 50, width: 300, height: 300)
If you're interested in changing the colour you can fiddle with code around line 411 in LFHeatMap.m below the comment that says '// Red and alpha component'
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 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.