I'm building a game similar to Tetris, but with blocks that move smoothly (pixel by pixel).
At the moment I create a separate Konva Image object for each new block:
let block = new Konva.Image({
x: 200,
y: 0,
transformsEnabled: 'position',
listening: false,
image: images.tiles,
crop: {
x: colorindex * 128,
y: shapeindex * 128,
width: 128,
height: 128
},
width: 128,
height: 128,
colorindex: colorindex,
shapeindex: shapeindex,
falling: true,
fallingspeed: 1,
});
that.blocks.push(block);
that.blocklayer.add(block);
With a lots of blocks on the screen I notice a slight slowdown in the animations.
Now I want to try and put all fixed blocks into 1 big Image object to see if this is faster.
Is it possible with Konva to copy a part of an image to another image ?
The simplest solution is to just move several blocks into a group, and then just cache it:
group.cache();
Demo: https://konvajs.org/docs/performance/Shape_Caching.html
Related
I have some Konva Text node, whose fill attribute is set to black and stroke is set to some other color.
In my canvas it looks as expected. The problem happens when I convert the canvas to base64 image to download it as an image file - in that case the downloaded image looks like in the screenshot below:
(the canvas is on the left side, the right one is the downloaded image)
As you can see, the stroke color is applied to the text's own color as well.
I created a Codesandbox example with a Text node that has the same attributes as in my environment, here is how that node is created:
const text = new Konva.Text({
x: 26.330053300533024,
y: 128,
text: "Add a body text",
defaultText: "Add a body text",
fontSize: 22,
fontFamily: "Montserrat",
draggable: true,
name: "text",
fontStyle: "300",
id: "textkgrsl68w",
is_settings: true,
wrap: "word",
padding: 5,
fill: "black",
opacity: 1,
isPremium: false,
width: 183.5,
visible: true,
rotation: 0,
scaleX: 1,
scaleY: 1,
offsetX: 0,
offsetY: 0,
skewX: 0,
skewY: 0,
stroke: "rgba(255,0,0,1)",
strokeWidth: 3.75
});
As you can see, it has the same (incorrect) look - without the inline color. I played with fontSize in Codesandbox and when I set it to very big value (like 100), the text's inline color became visible.
I assumed it can be some ratio problem, but as we see on the screenshot, the text's size is similar in both canvas and downloaded image.
How can this be fixed, maybe there is some extra attribute that should also be set?
konva: 7.1.4
react-konva: 16.12.0-0
UPDATED:
You can use text.fillAfterStrokeEnabled(true); to draw fill over stroke.
Old answer:
By default Konva is drawing fill first then stroke. So it will be a text itself and then stroke around it (that goes overfill part).
Probably one-day Konva will support a different order, but at the current moment konva#7.1.4 can't do that.
As a workaround just use two Konva.Text instances. First for stroke, second for fill.
https://codesandbox.io/s/download-konva-text-node-with-stroke-as-base-64-image-forked-w0z4v
I m creating a PDF file in nodejs using PDFkit, that contains a background image and an profile image of user. I tried looking through the documentation of pdfkit, but could not find any parameter to make another image float over the previous one.
Is there any solution present to make that happen or do I need to switch to other packages?
Any help would be appreciated.
//Background Image
doc.image(__dirname+'../../../resources/images/' + 'background.jpg',
{
height:400,
width:600,
margin: 0,
padding:0
});
//Image to be floated
doc.image(body,
{
height:200,
width:200,
margin: 0,
padding:0,
absolutePosition: {x: 50, y: 100}
}).moveTo(100, 150);
I expect a image over background but pdfkit is making new image to be pushed down the orignal image.
Can see this was asked a long time ago, but it is definitely doable today. Try this example.
let defaultImageOptions = {
width: 200,
height: 300,
};
// Add background image
doc.image("bg_image.png", 0, 0, defaultImageOptions);
doc.image("front_image.png", 0, 0, defaultImageOptions);
I'm creating a constraint between a body and a point:
var tempConstraint = Constraint.create({pointA: {x: 50, y: 50}, bodyB: body, pointB: {x: x, y: y}, stiffness: 0.1, length: 0, damping: 0.5, });
The point is also being moved around:
tempConstraint.pointA = {x: newX, y: newY};
The issue is that if pointA is moved slowly from left to right, for example, the body its dragging moves the opposite direction to what it should be. For example, if you dangle a pencil by the very tip and start moving the tip to the right, the bottom of the pencil should start to hang slightly to the left of the top as it moves. However, if I were to do that exact thing with the above code, the bottom of the pencil flies over to the right, exactly as it should if the top were being pulled left. Not sure what I'm doing wrong here but my only thought is that changing pointA is a bad idea, but I can't really come up with a better way to move the constraint point. Would creating a collision disabled, static body and attaching it to that, and then moving the body be a better way to go about this?
It's working fine for me, although I'm using a spring constraint. I've also removed the length property in the constraint so the length is auto generated:
var vw = window.innerWidth/100;
var vh = window.innerHeight/100;
var body = Bodies.rectangle(vw*50, vh*50, vw*3, vw*15, {
frictionAir: 0.02,
friction: 1,
render: {
fillStyle: "#FCED08"
}
});
var tempConstraint = Constraint.create({pointA: {x: vw*50, y: vh*50}, bodyB: body, pointB: {x:0,y:vw*7.5}, stiffness: 0.8, damping: 0.5, render: {type: "spring"}});
World.add(world, [body, tempConstraint]);
The full code is here
I have a simple network diagram. It contains of circle elements and lines connecting them. Now sometimes there could be quite a lot of those circles and they go 'behind' the screen (see the image attached).
The image doesnt cut off the edges, its the edge of my screen :)
Its a force diagram (code used can be found in this fiddle ). Setting the width = 400;
height = 500; or changing these two variables doesn't really help.
What variable am I missing here. Id like them not to go 'behind' the screen or is it just how it should behave ?
Thanks,
Neil
DEMO
map.set('C1', {
fixed: true,
x: 100,
y: height / 2
});
problem is that your 'C1' is fixed at 100 in x axis change it to 200 or 250 according to your need
map.set('C1', {
fixed: true,
x: 250,
y: height / 2
});
OR
you can change fixed: false, to achieve the same DEMO2
map.set('C1', {
fixed: false,
x: 100,
y: height / 2
});
OR
set C1 width half DEMO3
map.set('C1', {
fixed: true,
x: width/2,
y: height / 2
});
I have tried using jCanvas to make seats on my avatar system. Previously in the process i do draw an image (the background for the canvas).
The fields should be placed over the canvas, it does when i run it, but when i click the "layer" below, it turn the previously set background to BLACK?
g.addLayer({
method: 'drawRect',
x: left_px, y: top_px,
width: client.constants.ROOM_GRID_WIDTH, height: client.constants.ROOM_GRID_HEIGHT,
// Event bindings
mousedown: function(params) {
alert("clicked!");
}}).drawLayers();
Drawing background:
$("canvas").drawImage({
source: "http://xxxx.dk/framework/gfxs/rooms/"+callback[1],
x: 0, y: 0,
width: 760,
height: 552,
fromCenter: false
});