Correctly change SVG line coordinate using jQuery - javascript

I'm trying to change one of the Y-coordinates of an SVG line, I'm using jQuery and the SVG plugin + animation plugin. I have been animating the lines previously, but here the function needs to simply change the position,
this works;
$(strings[i]).animate({
svgY1 : 150
}, 0);
this does not;
$(strings[i]).attr(
'svgY1', '150'
);
I can see I shouldn't be using animate here, but I don't know why attr or css don't work in this context? I figure the problem is that svgY1 isn't the correct way to identify that coordinate maybe but I'm stuck.
At this point all concerned elements are static, I'm pretty sure it's not interference from another function.

First, give the lines unique identifiers:
svg.line(g, 450, 120, 550, 20, {strokeWidth: 5, id: '123'});
Now use the change function of the svg manager:
svg.change(svg.getElementById('123'), { y1: 150 });

Related

Crop or Clip image to Circle using JointJS

I'm very new to both JointJS and SVG, so I am having a hard time interpreting some of the documentation for JointJS. I am trying to get randomly searched images to display in a circle for this project, in a graph that uses JointJS to display and link the images with arrows. I am convinced this shouldn't be as hard as I am making it, but I have spent hours going through the documentation, so I need help. From what I can tell, joint.shapes.standard.Circle elements cannot take an image as a background or fill. I would be really happy to use the .BorderedImage elements, but when I change the radius to make them a circle, the border changes without cropping the image. I also tried to use the .Image element and change the radius, and again the image didn't change. I am under the impression that I could add a clipPath definition to an .Image or .BorderedImage to force a circle, but I am not familiar enough with the syntax to be clear on where to do that, and none of the examples I have found on stackoverflow have given me enough information to do that. I tried using the .define method, and kept getting "cannot read property define of undefined" errors, so I know I wasn't using that right.
Here's what I have in the way of error-free code (rounded border that doesn't crop):
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 600,
gridSize: 1,
// makes code not draggable
interactive: { elementMove: false, arrowheadMove: false }
});
var borderedImage = new joint.shapes.standard.BorderedImage();
borderedImage.resize(100, 100);
borderedImage.position(100, 100);
borderedImage.attr('root/title', 'joint.shapes.standard.BoarderedImage');
borderedImage.attr('label/text', 'Monster\nImage');
borderedImage.attr('border/rx', "50%");
borderedImage.attr('image/xlinkHref', './assets/images/monster.svg');
borderedImage.addTo(graph);
The code I tried for .define looked like:
joint.shapes.Element.define('standard.BorderedImage', {
attrs: {
body: {
rx: "50%"
}
}
})
Some of the resources I have looked at and couldn't figure out how to use correctly are:
Putting multiple films in a circle in Raphael/Joint.js
How to set background image for a rectangle in JointJs?
Using predefined SVG file for creating a custom JointJS shape with ports
https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Paper.prototype.properties

Having "visible overflow" inside of a GoJS node or graphObject

I want to have a shape inside of a node, which would be partly out of the boundaries of the node. Meaning, -10px top and left of the parent element.
Right now I have rectangle and a circle inside of a node and it looks like this:
As you can see, the link does not connect properly, since the size of the node has expanded. I would like the circle to be, using css terms, to be absolutely positioned, in other words, I don't want it to affect the node sizing the node (which is, obviously, invisible in this sample).
I have tried the following solutions:
Setting width and height to the node. Then it crops the circle, because it is out of the boundaries.
Using the fromSpot and toSpot properties in the node to connect the link to the center of the node. Apparently they are overridden by the layout, and I can't figure out how to disable isLayoutPositioned
Using adornments, but I don't understand at all how am I supposed to use them.
Searching if I could somehow set the overflow of the element visible, or to affect somehow the boundaries, or something like that, but have not found anything which would work for me.
What would be the proper solution here?
Make your Node a "Spot" Panel, make the "main" element of your node the "port" by assigning it a GraphObject.portId, and position the red circle relative to the "main" element by setting its GraphObject.alignment property, in this case to go.Spot.TopLeft. I'm also guessing that assigning the Node.locationObjectName is what you will want.
myDiagram.nodeTemplate =
$(go.Node, "Spot",
{ locationSpot: go.Spot.Center, locationObjectName: "BODY" },
$(go.Shape,
{ name: "BODY", width: 50, height: 50,
fill: "lightgreen", strokeWidth: 0,
portId: "" }),
$(go.Shape, "Circle",
{ alignment: go.Spot.TopLeft, width: 20, height: 20,
fill: "transparent", stroke: "red" })
);
Please read more at http://gojs.net/latest/intro/nodes.html. I recommend reading not only the Getting Started page, http://gojs.net/learn, but also all of the Introduction pages, http://gojs.net/intro, that apply to the kind of app you want to create.
In particular, these should be useful:
http://gojs.net/latest/intro/panels.html
http://gojs.net/latest/intro/tablePanels.html
http://gojs.net/latest/intro/ports.html
http://gojs.net/latest/intro/nodes.html

Snap.svg text with textpath does not animate as expected

I'm having an issue animating text using snap.svg. I'm moving text around an arc, from the bottom left of the arc to its apex. I'm using the standard Snap.animate functionality with its built-in setter function.
When I animate a random element (such as the circle I've included in the examples below), the animation behaves as expected. When I animate plain text it also behaves as expected. When I add a textpath attribute to that text, however, the animation functions differently in ways I don't understand.
This text animates as expected:
svg.text(0,200,'Regular Text').attr({'text-anchor': 'middle'});
Example (hover for animation): http://codepen.io/anon/pen/pJbmYW
Whereas this text stops short of its desired destination (also the top of the arc:
var path = 'M0 200 A 200 200, 0, 1, 1, 400 200';
svg.text(0,200,'Arced Text').attr({'text-anchor': 'middle',
'textpath':path});
Example (hover for animation): http://codepen.io/anon/pen/GJqaVp
I suppose I don't understand what adding the textpath is doing to the text object, as it seems I should be able to animate/transform its x and y coordinates as I could before I added the path.
Any insight or suggestions are welcome. Thanks.
It doesn't really make sense to animate x,y for a textPath in this case I think (I may be wrong), as what does that mean in respect to a fluctuating line.
I think what you want is to animate the startOffset. Eg...
Snap.animate(0, arc.getTotalLength()/2,
function(val){
var point = arc.getPointAtLength(val);
circ.attr({cx: point.x,
cy: point.y});
arcText.textPath.attr({ startOffset: val})
},1000,mina.easeinout);
with this bit being the main change ...
arcText.textPath.attr({ startOffset: val})
codepen (hover over)

Raphael inner glow?

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);

RaphaelJS: Move and scale objects with FreeTransform in limits

I am using the FreeTransform plugin for moving and scaling objects.
I want to limit this moving and scaling to the size of another rect which contains this object. How can I achieve this?
I have provided an example of problem on JSFiddle. (I want the red rect to stay inside the other rect.)
Thank you.
The FreeTransform plugin provides the option to set a boundary:
boundary: { x: x-pos, y: y-post, width: i, height: i},
see the documentation
https://github.com/ElbertF/Raphael.FreeTransform/

Categories