We Keep Coding

Line width in Konva js

just need to create line with image background. I found this opportunity in official documentation here (https://konvajs.org/api/Konva.Line.html). For the start I just need to create line with tension, color fill and width, but the width property dont work(or I dont know how to do it).
My code and output:
let line2 = new Konva.Line({
x: 100,
y: 50,
points: [75, 75, 100, 200, 300, 140],
fill: "red",
tension: 0.5,
width: 50,
strokeWidth: 1,
stroke: 'green'
});

As mentioned in another answer, Konva#4.0.12 doesn't support pattern for strokes. But it is possible to do with 2d native canvas API
So you have to:
1 - Draw a custom shape and make a stroke manually
2 - Or you can use Blend mode to mix a line and an image:
const group = new Konva.Group();
layer.add(group);
// draw line
const line = new Konva.Line({
x: 100,
y: 50,
points: [75, 75, 100, 200, 300, 140],
fill: "red",
tension: 0.5,
strokeWidth: 1,
stroke: 'green'
});
group.add(line);
// "fill" line with globalCompositeOperation: 'source-in' rectangle
var lineClientRect = line.getClientRect();
var fillRect = new Konva.Rect({
x: lineClientRect.x,
y: lineClientRect.y,
width: lineClientRect.width,
height: lineClientRect.height,
fillPatternImage: img,
globalCompositeOperation: 'source-in'
});
layer.add(fillRect);
group.cache();
layer.draw();
It may be a bit tricky, because globalCompositeOperation may effect all the shapes around your line. To fix that we can add the line and the "fill" rectangle into the group and cache it.
Demo: https://jsbin.com/zodojezuma/2/edit?html,js,output

It is not possible with Konva current version (4.0.12) to apply a pattern to the stroke of a line object. The snippet below uses a closed line with image fill pattern, but I don't think this is what you area after, but I created it to see what was possible and so will post it here in case useful in the future.
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
// add the layer to the stage
stage.add(layer);
var layer2 = new Konva.Layer();
var rect1 = new Konva.Rect({width:10, height:10, fill: 'magenta'})
var rect2 = new Konva.Rect({width:5, height:5, fill: 'cyan'})
var rect3 = new Konva.Rect({x: 5, y:5, width:5, height:5, fill: 'cyan'})
stage.add(layer2);
layer2.add(rect1);
layer2.add(rect2);
layer2.add(rect3);
stage.draw();
// make an image out of layer2
// Note - be sure to include width & height when using toImage() otherwise uses size of stage and fillpatternrepeat will seem to fail.
var image = layer2.toImage({
width: 10, height: 10,
callback(img) {
// do stuff with img
var blob = new Konva.Line({
points: [23, 20, 23, 160, 70, 93, 150, 109, 290, 139, 270, 93],
fill: '#00D2FF',
fillPriority: 'pattern',
stroke: 'black',
strokeWidth: 5,
closed: true,
tension: 0.3
});
// add the shape to the layer
layer.add(blob);
stage.draw();
var imageObj = new Image();
imageObj.onload = function() {
blob.fillPatternImage(imageObj);
layer2.remove(); // no longer needed.
blob.fillPatternImage(imageObj)
layer.draw();
stage.draw();
};
imageObj.src = img.src;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.0.12/konva.min.js"></script>
<div id="container"></div>
<img id='theImg' style='width:100px; height: 100px; border:"2px solid lime"; z-index: 10 '></img>

Aligning a fabric.js object to the top left corner of the inner text of an IText element

http://jsfiddle.net/541ev5nh/15/
I'm attempting to align the red Text object to the upper-left corner of the black IText object. When the Itext object is not rotated (at angle 0), you can see that the text is correctly aligned. However, rotating the IText throws the alignment off.
Resizing or changing the text of the IText also throws off the alignment, but don't worry about that for now. The rotation is the only thing that needs to work right now.
The problem is obviously coming from the fact that I'm using magic numbers to align the two items. I need a formulaic way derive these numbers that will keep the alignment consistent when the IText is rotated. Any ideas?
HTML:
<canvas id="canvas" width="800" height="600" style=""></canvas>
Javascript:
var w = 800;
var h = 600;
var cx = w/2;
var cy = h/2;
var auto = false; // auto/manual rotation
// Main "Text"
var txt = "Text";
var canvas = new fabric.Canvas('canvas');
var text = new fabric.IText(txt, {
left: 20,
top: 30,
fontFamily: 'sans-serif',
fontSize: 80
});
canvas.add(text);
var pt = new fabric.Point(cx,cy);
text.setPositionByOrigin(pt, 'center', 'center');
canvas.setActiveObject(text);
// decorator
var txt = "Top left";
var deco = new fabric.Text(txt, {
left: 20,
top: 30,
fontFamily: 'sans-serif',
fontSize: 14,
stroke: '#DD0000',
fill: '#DD0000'
});
canvas.add(deco);
canvas.on('object:modified', onModified);
function onModified(data){
var rotatedPoint = data.target.getPointByOrigin("left", "top");
deco.rotate(data.target.angle);
deco.setPositionByOrigin(new fabric.Point(rotatedPoint.x + 1, rotatedPoint.y + 11), 'left', 'top');
canvas.renderAll();
}
var angle = -2;
if (auto){
setInterval(onInterval, 30);
}
else{
onInterval();
text.setCoords();
}
function onInterval(){
angle += 2;
text.rotate(angle);
var data = {
target: text
};
onModified (data);
}

You can achieve this by making objects group. Fabric has a nice support for object group.
See here:
// Main "Text"
var txt = "Text";
var canvas = new fabric.Canvas('canvas');
canvas.clear();
var text = new fabric.IText(txt, {
fontFamily: 'sans-serif',
fontSize: 80
});
// decorator
var txt = "Top left";
var deco = new fabric.Text(txt, {
top:10,
fontFamily: 'sans-serif',
fontSize: 14,
stroke: '#DD0000',
fill: '#DD0000'
});
var group = new fabric.Group([ text, deco ], {
angle: 0
});
var lefts=canvas.getWidth()/2-group.getWidth()/2;
var tops=canvas.getHeight()/2-group.getHeight()/2;
group.set({
'left':lefts,
'top':tops
});
canvas.add(group);
canvas.renderAll();
See in Fiddler

HTML5 Canvas: Draw lines from a centered DIV, connecting to other DIVs around it? (Spiderweb effect) Kinetic JS

My question is: How do I draw lines coming from a specific DIV, & having them connect to the other DIVs on the page? (Spiderweb effect)
So far, I got - jsFiddle: http://jsfiddle.net/audnB/3/
But what I'm trying to do is...
Have all the lines be coming from the mother div, as shown below:
Below is the code that I am currently using (the same as the one in my JsFiddle):
I am actually using <a> (links) for this & not DIVs, but you know what I mean...
var lineCoords = new Array();
var stage;
var globalTimer = null;
$(window).resize(function() {
clearTimeout(globalTimer);
globalTimer = setTimeout(doneResize, 100);
});
function doneResize(){
drawLines();
}
function drawLines(){
lineCoords = new Array();
$('div#container > a').each(function(){
if ($(this).attr('data-action-properties').length>0){
var actionProperties = $.parseJSON($(this).attr('data-action-properties'));
}
var dx = $(this).css('left').replace('px','');
var dy = $(this).css('top').replace('px','');
var wd = ($(this).css('width').replace('px','') /2);
var hi = ($(this).css('height').replace('px','') /2);
var position = $(this).offset();
lineCoords.push(parseInt(dx)+(wd));
lineCoords.push(parseInt(dy)+(hi));
});
var layer = new Kinetic.Layer();
var redLine = new Kinetic.Line({
points: lineCoords,
stroke: '#000',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round',
dashArray: '0 30 0 30'
});
layer.add(redLine);
stage.add(layer);
}
$(document).ready(function() {
stage = new Kinetic.Stage({
container: "container",
width: $('#container').width(),
height: $(window).height()
});
setTimeout(drawLines,100);
});
$(window).resize(function(e){
stage.clear();
});
function imageresize() {
var contentwidth = $('body').width();
if ((contentwidth) < '700'){
$('.fluidimage').attr('src','little.jpg');
} else {
$('.fluidimage').attr('src','big.jpg');
}
}
imageresize();// Triggers when document first loads
$(window).bind("resize", function(){ // Adjusts image when browser resized
imageresize();
});
Thank you so much for your help, I greatly appreciate it!

When you are declaring redLine as below
var redLine = new Kinetic.Line({
points: lineCoords,
stroke: '#000',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round',
dashArray: '0 30 0 30'
});
using points: lineCoords essentially draw lines between consecutive points, so you have 2 options,
1. Starting from coordinates of point 2 onwards, after every point add coordinates of point 1 (Mother) assuming Mother is always the first.
points: [lineCoords[0],lineCoords[1],lineCoords[2],lineCoords[3],lineCoords[0],lineCoords[1],lineCoords[4],lineCoords[5]]
OR
2. make a for loop where you draw each line separately wherein assign point as: point: [lineCoords[0],lineCoords[1],lineCoords[2*i],lineCoords[2*i+1]], essentially the start and end point of the line where i = 1,2

This is close to what you're looking for: http://jsfiddle.net/audnB/9/
basically similar to what Ani said.
All your lines need to be from your 0,1 to 2i,2i+1 so that the coordinates match. And in a loop.
var layer = new Kinetic.Layer();
for (var i=0; i<lineCoords.length / 2; i++){
var redLine = new Kinetic.Line({
points: [lineCoords[0], lineCoords[1], lineCoords[2*i],lineCoords[2*i+1]],
stroke: '#000',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round',
dashArray: '0 30 0 30'
});
layer.add(redLine);
};
stage.add(layer);

moving more than two arrow lines on canvas

This is my code using kinetic.js
I draw three lines and move using mouse.
$(document).ready(function(){
var y1=50;
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group=new Kinetic.Group({
draggable: true,
dragConstraint : 'horizontal'
});
var lineme =function(pts){
var line1 = new Kinetic.Line({
points: pts,
stroke: "black",
strokeWidth: 4,
lineCap: 'round',
lineJoin: 'round',
});
group.add(line1);
}
for(a=0;a<=2;a++)
{
var points1 = [{
x: 73,
y: y1
}, {
x: 300,
y: y1
}];
lineme(points1);
y1=y1+50;
}
group.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
group.on("mouseout", function() {
document.body.style.cursor = "default";
});
// add the shape to the layer
layer.add(group);
// add the layer to the stage
stage.add(layer);
});
I want to draw arrow line I tried more time but I cant find out the proper solution. Is their any arrow function in kinetic js can anyone help me

You have to create a group and add both lines to the group.
Check the following example:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-a-group-with-kineticjs/
Hope it helps!

var line2 = .....
// add another line to the layer before adding it to the stage
layer.add(line2);
surely?

Coding jquery animations efficiently

I've created an intro animation to a page I'm working on using jQuery and Raphael, a javascript library. The animation works the way I'd like it to, but is oftentimes jumpy. Usually refreshing will cause it to animate much smoother than on its first page load. I'm wondering if this has anything to do with load times or if it's just the efficiency of my code.
You can see the page at: http://developer.crawford.com as well as the animation code below.
Is there any way to increase efficiency when it comes to javascript animations, or specifically with my code? Am I doing anything to cause the script to be very inefficient? Is there any good way to give the code a few seconds to load before executing to maybe make it run smoother other than simply setTimeout()?
function introAnimation() {
// creating the canvas
var paper = new Raphael(document.getElementById('mainCanvas'), '100%', '100%');
var canvasWidth = 500;
var canvasHeight = 500;
var offset = .6;
// speed of circle getting bigger
var speed1 = 1000;
// speed of circles diverging
var speed2 = 1200;
var hide = Raphael.animation({'opacity': 0});
// ellipse variable instantiation
var cRadius = 105;
var diam = cRadius*2;
// centerpoint
var cX = canvasWidth/2;
var cY = canvasHeight/2;
var circ1 = paper.ellipse(cX, cY, 10, 10);
circ1.attr({opacity: 1, stroke: '#777'});
var circRed = paper.ellipse(cX, cY, cRadius, cRadius).attr({opacity: 0, stroke: '#777'});
var circGreen = paper.ellipse(cX, cY, cRadius, cRadius).attr({opacity: 0, stroke: '#777'});
var circBlue = paper.ellipse(cX, cY, cRadius, cRadius).attr({opacity: 0, stroke: '#777'});
//red, green, blue watermarks, and logo
var redWatermark = paper.image('images/circle_red.png', cX-50, cY-50, 100, 100).attr({opacity: 0});
var greenWatermark = paper.image('images/circle_green.png', cX-50, cY, 100, 100).attr({opacity: 0});
var blueWatermark = paper.image('images/circle_blue.png', cX-50, cY, 100, 100).attr({opacity: 0});
var logoWidth = 60;
var logoHeight = 30;
var logo = paper.image('images/CMS_logo_only.png', cX-(logoWidth/2), cY*1.04, logoWidth*.95, logoHeight*.95).attr({opacity: 0});
var letterOffset = cRadius*1.2;
// circle centerpoints xR, yR: center of red; xG, yG: center of green; xB, yB: center of blue
var xR = cX; var yR = cY-cRadius*offset;
var xG = cX-cRadius*offset; var yG = cY+cRadius*offset;
var xB = cX+cRadius*offset; var yB = cY+cRadius*offset;
// insert CMS letter text
var c = paper.text(xR-Math.cos(.8)*letterOffset, yR-Math.sin(.8)*letterOffset, "c.").attr({fill: '#737373', 'font-size': '25px', 'font-family': 'IMFELLDWPicaItalic', opacity: 0});
var m = paper.text(xG+Math.cos(5*Math.PI/4)*letterOffset, yG-Math.sin(5*Math.PI/4)*letterOffset, "m.").attr({fill: '#737373', 'font-size': '25px', 'font-family': 'IMFELLDWPicaItalic', opacity: 0});
var s = paper.text(xB+Math.cos(0)*letterOffset, yB-Math.sin(0)*letterOffset, "s.").attr({fill: '#737373', 'font-size': '25px', 'font-family': 'IMFELLDWPicaItalic', opacity: 0});
// white overlap
// Three points of overlap:
var pointTopX = cX; var pointTopY = cY-(cRadius*.2);
var pointLeftX = cX-(cRadius*.365); var pointLeftY = cY+(cRadius*.33);
var pointRightX = cX+(cRadius*.365); var pointRightY = cY+(cRadius*.33);
var pathString = 'M'+pointTopX+' '+pointTopY+'A'+cRadius+' '+cRadius+' '+xG+' '+yG;
var pathString = "M"+pointTopX+" "+pointTopY+','
+"A"+cRadius+","+cRadius+",0,0,0,"+pointLeftX+","+pointLeftY+','
+"A"+cRadius+","+cRadius+",0,0,0,"+pointRightX+","+pointRightY+','
+"A"+cRadius+","+cRadius+",0,0,0,"+pointTopX+","+pointTopY;
var overlapFill = paper.path(pathString).attr({'stroke-width': 0, fill: '#fff', opacity: 0});
var overlapPath = paper.path(pathString).attr({opacity: 0});
//resize circle
circ1.animate({ 'rx': cRadius, 'ry': cRadius }, speed1, function() {
//hide it once it's done
circ1.animate({opacity: 0}, 0);
//show other circles
circRed.animate({opacity: 1}, 0);
circGreen.animate({opacity: 1}, 0);
circBlue.animate({opacity: 1}, 0);
//move other circles
circRed.animate({cy: cY-cRadius*offset, rx: cRadius, ry: cRadius}, speed2);
circGreen.animate({cx: cX-cRadius*offset, cy: cY+cRadius*offset, rx: cRadius, ry: cRadius}, speed2);
circBlue.animate({cx: cX+cRadius*offset, cy: cY+cRadius*offset, rx: cRadius, ry: cRadius}, speed2);
logo.animate({opacity: 1}, speed2);
//move to center
redWatermark.attr({width: diam, height: diam, x: imgX(cX, diam), y: imgY(cY, diam)});
greenWatermark.attr({width: diam, height: diam, x: imgX(cX, diam), y: imgY(cY, diam)});
blueWatermark.attr({width: diam, height: diam, x: imgX(cX, diam), y: imgY(cY, diam)});
//animate out
redWatermark.animate({y: imgY(cY-cRadius*offset, diam), opacity: .35}, speed2);
greenWatermark.animate({x: imgX(cX-cRadius*offset, diam), y: imgY(cY+cRadius*offset, diam), opacity: .35}, speed2);
blueWatermark.animate({x: imgX(cX+cRadius*offset, diam), y: imgY(cY+cRadius*offset, diam), opacity: .35}, speed2, function() {
logo.toFront();
c.animate({opacity: 1}, 1000); m.animate({opacity: 1}, 1000); s.animate({opacity: 1}, 1000);
overlapFill.animate({opacity: 1}, 1000); overlapPath.animate({opacity: .3}, 1000);
//nav slide in
nav();
});
});
redWatermark.hover(function() {
$('#createSub').slideDown(300);
});
redWatermark.mouseout(function() {
$('#createSub').slideUp(300);
});
greenWatermark.hover(function() {
$('#storeSub').slideDown('fast');
});
greenWatermark.mouseout(function() {
$('#storeSub').slideUp('fast');
});
blueWatermark.hover(function() {
$('#manageSub').slideDown('fast');
});
blueWatermark.mouseout(function() {
$('#manageSub').slideUp('fast');
});
}

Your PNG's are 400+k http://developer.crawford.com/images/circle_blue.png
You're forcing users to download over a meg of image data while trying to animate it at the same time. This will not be smooth for most visitors. I'd recommend either compressing/shrinking your images, or preloading them.

Replace repeated calculations with the result:
Variations of cY-cRadius*offset appears often, so calculate it ahead of time.

It looks jumpy to me too. Have you considered pre-caching your images before you call any of the animation?