Develop Reference

How to copy/paste an image to another image with Konva.js?

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

How can I prevent both vertical and horizontal stretching of contained text while resizing text-based objects in Fabric.js?

I want to be able to scale text-based objects (for example with classes and subclasses of IText, Textbox) without stretching the text inside of the object. The interaction of scaling and moving is on user-side (UI), not programmatically (I am working on a drawing editor).
The behaviour I am looking for is similar to the one in the sticky notes apps: You can scale the paper but this action does not scale your text too.
I have already checked this, but this is only for horizontal prevention: Fabric.js How to resize IText horizontally without stretching the text
This is neither what I want/mean: Fabric.js : How to set a custom size to Text or IText?
I know that a scaling factor different than 1 implies the stretching of the inner text, and that by changing the width and height I can resize the object while keeping the text unscaled, so I tried updating these during scaling using events listeners.
I tried many combinations of the IText,Textbox with some scaling events, like this one:
fbtext.on('scaling', function() {
this.set({
width : this.width * this.scaleX,
height: this.height * this.scaleY,
scaleX: 1,
scaleY: 1,
});
});
I also tried this with Textbox:
fbtext.on('scaling', function() {
this.set({
height: this.height * this.scaleY,
});
});
But nothing worked so far. I am out of ideas.

var canvas = new fabric.Canvas('mycanvas');
let textbox = new fabric.Textbox("Sample text", {
left: 100,
top: 100
});
let lastHeight;
const updateTextSize = () => {
const controlPoint = textbox.__corner;
//mr and ml are the only controlPoints that dont modify textbox height
if( controlPoint && controlPoint != "mr" && controlPoint != "ml"){
lastHeight = textbox.height * textbox.scaleY;
}
textbox.set({
height: lastHeight || textbox.height,
scaleY:1
});
canvas.renderAll();
};
textbox.on('scaling', updateTextSize );
textbox.on('editing:entered', updateTextSize);
canvas.on('text:changed', updateTextSize);
canvas.add(textbox);
canvas {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.min.js"></script>
<canvas id="mycanvas" width="400" height="400"></canvas>
Here is a code sample that will let you modify the "sticky note size" without streching out the text

Thanks #Ivan, your solution is working for me, with a small glitch.
When increasing the size of the text box using corners the text is getting stretched and compressed. I haven't found the solution of this yet and have currently implemented a workaround to hide all the corner scaling points.
box.setControlsVisibility({
bl: false,
br: false,
tl: false,
tr: false
});
http://jsfiddle.net/bkgvewh6/
Just to add I am posting this as an answer and not as a comment to your answer as I don't have stack overflow reputation to do so.

Why doesn't highcharts solidgauge charts scale the way I expect?

I am using a solidgauge chart from highcharts and appear to have scaling issues.
The basic issue is that I want to define a chart that can be resized and expect the graph to adjust to fit the space in the best way.
But sometimes the chart extends outside the container and sometimes the chart is smaller than it needs to be.
A test is in jsFiddle here.
That test shows various versions of the chart:
Chart test [A] = pane.size = 100% / container size = 400px x 400px.
Chart test [B] = pane.size = 140% / container size = 400px x 400px.
Chart test [C] = pane.size = 100% / container size = 400px x 300px.
Chart test [D] = pane.size = 140% / container size = 400px x 300px.
The main chart options used are these:
{
chart: {
type: 'solidgauge'
},
credits: false,
title: {
text: 'Solid Gauge'
},
yAxis: {
minorTickInterval: null,
min: 0,
max: 100
},
pane: {
center: ['50%', '85%'],
size: '140%', // ISSUE: problem scaling chart outside container
//size: '100%', // ISSUE: problem with gap above gauge
startAngle: -90,
endAngle: 90,
background: {
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
decimalPlaces: 1,
units: 'rpm',
borderWidth: 0,
useHTML: true,
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
('black') + '">{point.y:.11f}</span><br/>' +
'<span style="font-size:12px;color:silver">rpm</span></div>'
}
}
},
tooltip: {
enabled: false
}
};
Chart [A] is OK, but if I use the same pane size (100%) and reduce the height (to 300px) to remove the gap between the title and the chart then I get [C] where the chart has been scaled down too small.
Similarly, chart [D] is OK, but if I use the same pane size (140%) and increase the height (to 400px) then the graph extends outside the container as shown in [B].
Are there any options that I am missing that can be used to fix this problem, or am I going to have to dynamically adjust the chart based on container size (which I want to avoid) ?

As you can read on highcharts forum here: https://www.highcharts.com/forum/viewtopic.php?t=33070
Solid gauge is created from angular gauge. The background is one of
key elements that make the chart look like arc shaped solid gauge. If
you disable it you will see that options used for inner radius and
outer radius as well as size or center of pane are calculated for
circle, but the arc is used for visualization.
So, remove the startAngle and endAngle to see how the chart is scaled. As you can notice it is scaled as circle and arc is used only for visualization. That's why it is acting so strange, due to solid gauge architecture.
Demo:
https://jsfiddle.net/BlackLabel/mtevb2d3/

How should I fix backward angular velocity upon moving a constraint in MatterJS?

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

Delay pie chart animation until in viewport

I am using this jquery plugin by LugoLabs called "Circles" in order to animate a few pie charts on a website I am building. (https://github.com/lugolabs/circles)
It works perfectly, but the pie chart animation starts on page load and I want to delay it until it is seen by the viewer.
Would it be possible to use something like viewportchecker.js (https://github.com/dirkgroenen/jQuery-viewport-checker) to only start the animation once someone is viewing it? I've used this before on other projects with success, but I'm having a hard time integrating it with the existing javascript.
----Example setup---
HTML:
<div class="circle" id="circles-1"></div>
SCRIPT:
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text'
styleWrapper: true,
styleText: true
});

As previously mentioned as comment: The circles github has an example for starting the circles animation when the circle is in view: https://github.com/lugolabs/circles/blob/master/spec/viewport.html.
I've added a Fiddle containing this example, and as there was the question how to adjust the circle from OP to work with this example I've adjusted this in another Fiddle. The only adjustment was to change the function createCircles as follows:
function createCircles() {
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text',
styleWrapper: true,
styleText: true
});
}

Can't you just calculate the scroll height like:
$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() > $('#circles-1').offset().top + 810)
{
$(function() {
///your pies, 810px is your height
});
});
}
});
instead of loading a plugin...