Is there an easy way to move a Textpath from its initial position? I've had no problems moving Shape with a simple increase to its X and Y attributes, but it seems it doesn't work for Textpath. I've also tried resetting its data attribute (doesn't work for some reason), or recreating it entirely (works, but for some reason disappears right after, maybe because the trigger to move it is a mouseover on a Shape?). Basically, I'd need to easiest way to move it based on its previous position (so I can just += -= the coordinates).
Text Paths don't really move like other nodes. The data attribute is what determines the points that are displayed, regardless of the node's actually x/y position. As you noted, changing the data attribute doesn't work (plus who wants to recalculate all of those points for every movement?)
Since the points in the data attribute are relative to the node's parents, I think the easiest method would be to wrap the Text Path in a group and then move the group around using .move() or .setPosition() as needed.
Example (code adapted from the Text Path Tutorial):
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 220
});
var layer = new Kinetic.Layer();
var textpath = new Kinetic.TextPath({
x: 100,
y: 50,
fill: '#333',
fontSize: '24',
fontFamily: 'Arial',
text: 'All the world\'s a stage, and all the men and women merely players.',
data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50'
});
var group = new Kinetic.Group();
group.add(textpath);
group.move({x:50, y:50});
layer.add(group);
stage.add(layer);
Related
I’ve managed to implement, using konva, multiple tools that allow users to draw different shapes and patterns like: rectangle, circle, arrows, free draw, eraser, et. c.
I’m trying to achieve something like: using a paint bucket, users should be able to fill different parts of a shape, if over that shape are drawn other shapes or patterns.
Maybe this use case helps to understand better my question:
The user draws a circle.
Afterwards he draws lines over that circle so will be split in multiple areas.
The user uses now the paint bucket and tries to fill only the areas of that circle.
I’m wondering if, using konva, is possible to achieve this functionality.
Until now I've manage only to fill entire shapes, similar to this.
Update
Added images for the use case above.
1 & 2. User draws a circle and lines over it:
Using paint bucket user can fill certain areas of that circle:
Any feedback will be very welcomed.
Bad news: What you want cannot be done with Konvajs, as it is designed to work with vectorial images. Each figure is created as a whole by an equation and is "separated" of other figures (as the lines X and Y and the circle are separate in the Snippet below. It is not a raster layer. To do a paint bucket tool in vector graphics is hard.
(See Good news at the end!)
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var circle = new Konva.Circle({
x: 180,
y: 120,
radius: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
var lineX = new Konva.Line({
x: 180, // 180-50
y: 120,
points: [-100, 0, 100, 0],
stroke: 'black',
strokeWidth: 4
});
var lineY = new Konva.Line({
x: 180, // 180-50
y: 120,
points: [0, -100, 0, 100],
stroke: 'black',
strokeWidth: 4
});
circle.on('click', function() {
var fill = this.fill() == 'red' ? '#00d00f' : 'red';
this.fill(fill);
layer.draw();
});
layer.add(circle);
layer.add(lineX);
layer.add(lineY);
stage.add(layer);
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
<script src="https://unpkg.com/konva#3.2.6/konva.min.js"></script>
<div id="container"></div>
Good news: But you can do it with Canvas, HTML5 and Javascript.
Here you have a good tutorial which includes a DEMO (on top of the page) and the SOURCE CODE to Create a Paint Bucket Tool in HTML5 and JavaScript
Hope this helps you!
Unless konva has a specific implementation for it that I don’t know of, this is more of an algorithmic problem.
One approach you could take if you decide to implement it on your own is something like a cell automaton. You would create one pixel somewhere in the middle, and it would grow over time (of course you don’t need to show the growth). The rules for it would be that any pixel of the specified color must colorize any pixel around it if it is the same as the average color of pixels around original point (where you clicked to fill color).
Hope this helps :)
I’ve came up with a solution: https://codesandbox.io/s/stupefied-northcutt-1y0cg.
In short, what this solution does is that when the stage is mounted, the paint bucket is setup targeting the canvas generated by konva. The pixels around the one clicked are colored using a cell automaton algorithm, as per Antoni's suggestion.
Okay, but the downside of this approach is that whenever you’re drawing a shape after paint bucket is used, the paint bucket changes get lost because (I assume) render() doesn’t know about the "vanilla" changes made in setupPaintBucket().
Another downside of this approach is that the canvas is blurry.
Sources:
Draw circle, arrow and free hand: https://codesandbox.io/s/43wzzv0l37
Vanilla Paint Program: https://codepen.io/falldowngoboone/pen/zxRXjL
I have the following code using D3 library for example:
<html>
<body>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var points = [{x: 100, y:100}, {x: 200, y:200}, {x: 300, y:300}, {x: 400, y:400}, {x: 500, y:500}, {x: 600, y:600}, {x: 700, y:700}];
var width = 1000;
var height = 1000;
var racoonWidth = 100;
var racoonHeight = 100;
var svg = d3.select("body").append("svg").attr({width: width, height: height});
var g = svg.append("g");
var racoons = g.selectAll("svg").data(points).enter().append("svg:image")
.attr({"xlink:href": "http://www.clker.com/cliparts/1/4/5/a/1331068897296558865Sitting%20Racoon.svg",
width: racoonWidth, height: racoonHeight, x: function(d){return d.x}, y: function(d){return d.y}});
</script>
</body>
</html>
Which draws 7 images (racoon images) diagonally on the page - but in rael life they will be randomly placed in the page.
I want to draw lines between pairs of images, without any line intersect with any of the other images (if possible). It is important that the calculation will not be done according to the given example only, but for every scattering possible.
The lines don't have to be straight, though it should be nice to look, so rounded lines are preferred.
edit:
To make it easier - Say I want to draw an arrow between two images which were clicked one after another (An arrow that goes from the first image clicked to the second), and lets say I clicked the first image and then the last - A simple straight line will go across all other images. Instead, I would like to draw a round line that will go above/under all the other images and connect the two.
I came across a library called vivus.js which draws paths using SVG, maybe I can find my answers within it?
Is there an elegant way to do so within D3 or Vivus.js libraries?
You mean Voronoi cells for the images?
If the images have size, there isn't necessarily an infinite line
that separates two images but doesn't touch any of the other
images, even if you constrain the random images never to overlap.
Voronoi digrams for non-points cells are a bit tricky to
calculate. But you can get a good enough answer easily enough.
For each image, take the nearest image, and draw a line
perpendicular to the line between them (however defined)
such that it doesn't intersect either image. Then eliminate
any images that lie the same side of that line, and
take the next nearest, until no points are left. You now
have either a polygon enclosing the image, or, if it is an edge
image, a half-open space.
Now put the point into a "done" list, with its neighbours and
separation lines attached.
Move to the next point. If it has any "done" neighbours,
eliminate all points on the wrong side of the lines. Then
repeat the process, until all the points are done.
Im using snap.svg an snap.svg.zpd libraries. Same issue I have if I use snap.svg and jQuery panzoom library combination.
Code sample you can find here.
var mySvg = $("#plan")[0];
var snap = Snap("#plan");
//create an image
var imagePlan = snap.image("http://upload.wikimedia.org/wikipedia/commons/4/42/Cathedral_schematic_plan_fr_vectorial.svg", 10, 10, 900, 500);
var group = snap.group(imagePlan);
snap.zpd();
var pt = mySvg.createSVGPoint(); // create the point;
imagePlan.click(function(evt)
{
console.log(evt);
pt.x = evt.x;
pt.y = evt.y;
console.log(mySvg.getScreenCTM().inverse());
//When click, create a rect
var transformed = pt.matrixTransform(mySvg.getScreenCTM().inverse());
var rect1 = snap.rect(transformed.x, transformed.y, 40, 40);
group.add(rect1);
});
Problem is...if you click on initial svg it will add rectangle to the mouse position. If you pan/zoom image and then add rectangle it will be shiffted.
It looks like problem is in method mySvg.getScreenCTM().inverse(). Matrix returned is always same one, panning and zooming does not change it. It always use matrix from initialy rendered svg. However, if I inspect svg element, I can see that pann/zoom change transform matrix directly on element (image below).
Does anybody know how to fix this. My requirement is to be able to drag and drop elements outside svg into svg on any zoom scale or pan context, so I need transformation from mouse click point to svg offset coordinates. If you know any other approach or any other library combination that could done this, it would be ok for me.
Thanks in advance.
Problem is, the transform isn't in mySvg. Its on the 'g' group element thats inside the svg. Zpd will create a group to operate on as far as I know, so you want to look at that.
To hightlight this, take a look at
console.log(mySvg.firstElementChild.getScreenCTM().inverse());
In this case its the g element (there's more direct ways of accessing it, depending on whether you want to just work in js, or snap, or svg.js).
jsfiddle
Its not quite clear from your description where you want the rect (within the svg, separate or whatt) to go and at what scale etc though, and if you want it to be part of the zoom/panning, or static or whatever. So I'm not sure whether you need this or not.
I'm guessing you want something like this
var tpt = pt.matrixTransform( mySvg.firstElementChild.getScreenCTM().inverse() )
var rect1 = snap.rect(tpt.x, tpt.y, 40, 40);
I am looking for a way to achieve only an inner glow or shadow on a raphael path. Unfortunately, you can only do radial gradients on an ellipse or a circle.
One idea may be to create a series of paths which are slightly smaller and fit inside the original path and then to give them different stroke colors, but I have no idea how I would approach that. Some function that takes the path and subtracts or adds values to the numbers depending on where they are... Anyway, if anyone has any ideas, or maybe another javascript library that does this, that would be great.
Ok here is how you can achieve that. It is pretty straightforward I think. I know it is hard to manually create a shadow path from your original. But there is a trick called scale() function. Steps to how you can get inner shadow or inner glow effect:
Create your path
Clone it into another path
Set the scale() of cloned path to be 0.9*original
Then hide the cloned path, but apply glow() function on it
The code:
var paper = Raphael("notepad", 500, 500);
var path = paper.path("M 50 200 L 120 100 200 190 80 250z");
var shadow = path.clone().scale(0.9).hide();
shadow.glow();
path.attr({stroke: "darkred"});
Look at the DEMO, this is not perfect but with minor changes, yo can get what you want.
Also as a side note:
glow() function has attributes like offsetx, offsety, opacity... Changing those attributes will give you your preferred shadow/glow.
UPDATED CODE http://jsfiddle.net/jUTFm/41/
Look here. You could try animating the width of the path and darkening the color gradually to give some kinda glowing effect.
check out the bottom part
brain = paper.add(brain);
brain.attr('stroke', '#ff0');
brain.transform('s 0.5, 0.5 0 0');
glow = brain.glow({
color: '#ff0',
width: 5
});
anim = Raphael.animation({
"stroke-width": 15,
opacity: 1
}, 500);
anim = anim.repeat(Infinity);
glow.animate(anim);
I've looked around the internet and found nothing, I've looked on other KineticJS examples that use a strokeWidth of 1 on their rectangles and they all appear to have a semi-opaque 2 pixel line rather than a nice sharp 1px opaque black line.
Now, I am guessing that as Google has nothing that the solution is either really simple or impossible, but.. do you know how I can get a one px border using KineticJS?
$(window).load(function(){
var stage = new Kinetic.Stage({container: "kineticdiv", width: 700, height: 400});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.attrs.width/2, y: stage.attrs.height/2,
width: 100, height: 100,
fill: "#eee", stroke: "black", strokeWidth: 1
});
layer.add(rect);
stage.add(layer);
});
Anyone got any ideas?
when you draw a line from (x,y1) to (x,y2) (say; the same is true for horizontal lines) you need to worry about whether x is "in the middle of a pixel". if the line is "between pixels" then it will be half in one and half in another. the result will look blurred (it's basically anti-aliasing).
graphics systems vary on whether coordinates are for corners or centres, but you can fix the issue by experimenting a little - you just need to add half a pixel width to the coord and try again.
in the case of an html5 canvas (0,0) is the top left corner, so if you have no transform i guess the top left pixel centre is at (0.5, 0.5).
Another approach: if you use Integer numbers as coordinates and ortogonal 1px weight lines, then you can move the whole stage by [0.5, 0.5] and you dont have to add the half of a pixel to each coordinate, you can then use Integer numbers as coordinate as your whole stage will be moved half of pixel to right and the same to down.
There is a cool approach to get exactly what you want: group two similar shapes. The one at the lower level is one pixel larger then the one at the top. Fill the bottom one with the color you want your border (in your case: Black). works fine for me and has the precision and quality of CSS
The easiest way of solving this with Kinetic is to use the offset properties. So, rather than shifting individual coordinates of what you're drawing, your entire line/shape/group/layer/stage is offset by that much, theoretically getting it where you want it with minimum fuss:
var rect = new Kinetic.Rect({
x: stage.attrs.width/2, y: stage.attrs.height/2,
width: 100, height: 100,
fill: "#eee", stroke: "black", strokeWidth: 1,
offsetX: 0.5,
offsetY: 0.5
});
or, to get a whole bunch of stuff at once:
var layer = new Kinetic.Layer({
offsetX: 0.5,
offsetY: 0.5
});
That said, not all items benefit from this trick. Some, in fact, get fuzzier. So, make sure to apply the offset at the most atomic level that avoids contaminating shapes that don't benefit from it.