Label arrows created in ArrowHelper of THREE.js - javascript

In this question (Labelling the vertices in AxisHelper of THREE.js) is explained how to label axis created with THREE.AxisHelper. I tried to follow the same procedure for THREE.ArrowHelper without sucessfull. So, I'd like to know how to label the arrows I created, just like when indicating the labels of a coordinate system (x,y,z). In this link it how I tried to reproduce the idea: http://jsfiddle.net/g7oqexr8/

What exactly does not work? It does not show up? It crashes? (if so, where???)
Tip:
Why don't you add the label object to the created arrow?
instead of:
//text.position.x = arrowHelper.geometry.vertices[1].x;
//text.position.y = arrowHelper.geometry.vertices[1].y;
//text.position.z = arrowHelper.geometry.vertices[1].z;
//text.rotation = camera.rotation;
//scene.add(text);
arrowHelper.add(text);
This adds to 'text' the position, rotation and scaling from the arrowHelper.
If you want, you can modify afterwards the 'text' rotation, position or scaling.
EDIT:
Documentation stands:
TextGeometry uses typeface.json generated fonts. Some existing fonts can be found located in /examples/fonts and must be included in the page.
That's probably why line with:
var textGeo = new THREE.TextGeometry('Y', {size: 5, height: 2, curveSegments: 6,font: "helvetiker",style: "normal"});
is crashing.

Related

Canvas fabric.js: how to set the height correctly?

I use fabris.js factories to work with objects canvas. If you change the height of a separate mouse or separate field - it works. If you change the mouse first, then field - to work with well-read false values.
Please help to fix.
Full code
A bug in the video.
Line 83, 84. Setting values:
canvas.getActiveObject().setHeight(parseInt(heightElInput.value));
canvas.getActiveObject().height = parseInt(heightElInput.value);
Somewhere you changing scaleY for the object that's why you have a bug. Insert this code after line 84 and it should work: canvas.getActiveObject().scaleY = 1 - when you resize vertically, if horizontally - canvas.getActiveObject().scaleX = 1; Also, you can you function setHeight, you don't need to use both of them – Observer

How to increase label padding in the nodes of a Vis.js network graph?

When creating network graphs with Vis.js, the nodes in the network are drawn with labels that - for my use case - don't have enough 'padding', i.e., there is not enough space between the node label text and the border of the node. The following pic illustrates it:
Considering the vast amount of config options already available in Vis.js, I thought increasing label padding would be simple, but for the life of me, can't figure out how to do it. Have gone through the official docs, and have searched through StackOverflow and Google, but found no hints. Feel like I'm missing something obvious - can anyone shed a light?...
I found it - at least it's working for vis#4.20.1 which i installed with npm. They use margin to modify the space between the border and the label text.
The options object you pass in, it needs a margin property on the nodes property like this:
const options = {
nodes: {
margin: 10
}
}
You can also specify different margins for top, bottom, right, left like this:
const options = {
nodes: {
margin: {
top: 10,
bottom: 20,
left: 5,
right: 5
}
}
I can't seem to specify in anything but px - i tried to use '1em' for input, but it seems it only takes integer values - and expresses it in pixels.
In case you're curious, i found the information i needed from the options.js file located in node_modules\vis\lib\network. If you're looking for options for the other areas of vis (like timeline), i bet there is an options file for that in a similar folder.
This property is not yet customizable, however I managed to change it directly in the vis.js source file:
Search for the Box class definition : var Box = function (_NodeBase)
In the resize function there is the margin to modify : var margin = 5;
Change it to whatever you want, and it's done
I've been just hitting the same problem. The only solution I found was to set borderWidth and borderWidthSelected of the node to the amount of padding I wanted. To make it not look too ugly, you can also set the border the same color as the background of the node.
Besides, it gives the graph a nice modern flat look.

Masked element in Snap SVG doesn't come into view when translated

I have a group of elements that are masked by a rect in SnapSVG and I want to translate the elements, bringing new ones into view (and hiding ones that are currently in view). The code is really simple - here's a codepen: http://codepen.io/austinclemens/pen/ZbpVmX
As you can see from the pen, box1, which starts outside the mask element (clip) should cross through it when animated, but it never appears. Moreover, box2, which should move out of the clipping area, remains visible.
This example seems to do a similar thing and has no problems: http://svg.dabbles.info/snaptut-masks2
Here's the code from codepen:
var t = Snap('#target')
var clip=t.rect(200,200,200,200).attr({fill:'#fff'})
var box1=t.rect(300,100,50,50).attr({fill:'#000'})
var box2=t.rect(300,300,50,50).attr({fill:'#000'})
var boxgroup=t.group(box1,box2)
boxgroup.attr({mask:clip})
boxgroup.animate({transform:'t100,300'},2000)
I notice that the svg.dabbles examples translates the clip region by 0,0 at one point, but adding something like that doesn't seem to get me anywhere.
Ok, I figured this out thanks in part to this really great article about SVG transforms: http://sarasoueidan.com/blog/svg-transformations/
The upshot is that when I translate the box group, it takes the mask with it. This is a little confusing to me still - I guess the mask attribute is causing this somehow? Anyways, the solution is to apply an opposite translation to the mask to keep it in place. Check the pen to see it in action but basically I just had to add:
clip.animate({transform:'t-100,-300'},2000)
The tricky part of this is that you now need to synchronize the movement of the mask and the movement of the box group.
edit - I now demonstrate how synchronization can be achieved using snap's set.animate method on the codepen.

Tracking mouse position of a jqplot vertical line chart

I want to create a jqPlot line chart which has the ability to change orientation between vertical and horizontal orientation. I was able to achieve this using CSS rules, by rotating the div element containing the chart.
My work up to now: http://jsfiddle.net/GayashanNA/A4V4y/14/
But the problem is I also want to track the mouse-pointer and mouse clicks on points on chart after the orientation is flipped because i want to annotate those points. I am unable to do this when the chart is in vertical orientation. Can anyone suggest a method to do this? Or am i approaching the problem in a wrong way?
(Note: I am able to do this in horizontal orientation, you can observe it if you try to click on a point on the above chart.)
Thanks and help is much appreciated.
I've never used jqPlot, but I guess your problem is trying to use css rotate(), since the cursor plugin is using the mouse position to determine where to draw the lines, and element's size doesn't change when transformed by rotate(), it still have the same width and height values.
If you take a look at the code, you will see:
if (c.showVerticalLine) {
c.shapeRenderer.draw(ctx, [[gridpos.x, 0], [gridpos.x, ctx.canvas.height]]);
}
if (c.showHorizontalLine) {
c.shapeRenderer.draw(ctx, [[0, gridpos.y], [ctx.canvas.width, gridpos.y]]);
}
So it seems like the library is always drawing the lines based on mouse position over the original element, which of course, won't match the position after being transformed by rotate(), and XY coordinates are going to be transformed to YX after rotate().
I would try to change the size of your original element, though I don't know if the library lets you specify in which sides are the labels going to be drawn.
I finally found a solution for the problem. But i had to change jqPlot library to achieve this. To help anyone else who run in to the same problem, i'll put my solution here.
First i had to insert the following code in to the jqPlot class of the jquery.jqplot.js file, which is the core library.
function jqPlot() {
//add the following code segment
var verticallyOriented = false;
this.setVertical = function(state){
verticallyOriented = state;
}
//don't change other code that isn't mentioned here
//now you have to change the logic in the getEventPosition function
//to make sure the new orientation is detected
function getEventPosition(ev) {
//change the line starting with var gridPos = ...
//to the following code segment
//depending on the orientation the event position calculating algorithm is changed
if(verticallyOriented){
var gridPos = {x:ev.pageY - go.top , y:plot.eventCanvas._elem.height() - ev.pageX + go.left};
} else {
var gridPos = {x:ev.pageX - go.left, y:ev.pageY - go.top};
}
//no change to other code is needed
}
}
You can view a working example here: http://jsfiddle.net/GayashanNA/yZwxu/
Gist for the changed library file: https://gist.github.com/3755694
Please correct me if i have done something wrong.
Thanks.

Raphael.js - Using fill attribute for a circle, makes the element in the circle disappear. How to avoid that?

Please see the code below. I am trying to draw a circle around a path (an icon made by Raphael.js founder, Dimitry) and then fill the circle with a color. This, however, paints on the top of the path. If I could first draw the filled circle and then draw the path, this would be solved. But I need to reference the path because I need to find its center, in order to draw the circle. Can anyone please suggest how to do this? My code is below.
Thanks.
<script>
var myVar = {
s: 1,
pw: 850,
ph: 450
}
</script>
<script>
var paper = new Raphael('figSellerBuyer', myVar.pw * myVar.s, myVar.ph * myVar.s);
var market = paper.path(paths.marketBoundary);
market.attr({fill: "rgb(75,245,75)", stroke: "None"});
var humanIcon = paper.path("M21.021,16.349c-0.611-1.104-1.359-1.998-2.109-2.623c-0.875,0.641-1.941,1.031-3.103,1.031c-1.164,0-2.231-0.391-3.105-1.031c-0.75,0.625-1.498,1.519-2.111,2.623c-1.422,2.563-1.578,5.192-0.35,5.874c0.55,0.307,1.127,0.078,1.723-0.496c-0.105,0.582-0.166,1.213-0.166,1.873c0,2.932,1.139,5.307,2.543,5.307c0.846,0,1.265-0.865,1.466-2.189c0.201,1.324,0.62,2.189,1.463,2.189c1.406,0,2.545-2.375,2.545-5.307c0-0.66-0.061-1.291-0.168-1.873c0.598,0.574,1.174,0.803,1.725,0.496C22.602,21.541,22.443,18.912,21.021,16.349zM15.808,13.757c2.362,0,4.278-1.916,4.278-4.279s-1.916-4.279-4.278-4.279c-2.363,0-4.28,1.916-4.28,4.279S13.445,13.757,15.808,13.757z")
humanIcon.attr({fill: "rgb(75,75,75)"}).scale(2.5,2.5);
humanIcon.translate(40,40);
var bbox = humanIcon.getBBox();
var xcenter = Math.round(bbox.x + bbox.width/2.0);
var ycenter = Math.round(bbox.y + bbox.height/2.0);
var circle = paper.circle(xcenter, ycenter, 40);
circle.attr({fill:"white"});
</script>
After doing a lot of search on Google, I found the answer here on Stackoverflow. At the time, I did not save the link to the answer and I don't remember it. If anyone does find it, please edit this answer and post it. However, I did record the solution and here it is:
One can use the insertBefore() and insertAfter() functions in Raphael. In the example code given in the question, one can do this by changing the last line to:
circle.attr({fill:"white"}).insertBefore(humanIcon);
Thanks to those who responded.
Try changing the order in which the two are drawn. That or look over the Raphael docs to see if there is a "Z-index" attribute that can be used to permanently modify the position of the path on the stack of render-able layers.
Edit: I didn't read your explanation well enough. If you could declare your object without drawing it perhaps you could grab the BBox, and then draw it later.
Edit, Edit: SVG has a "defs" tag to create objects without drawing them, so it stands to reason that Raphael can handle it too.
Try using Raphael's Element.toBack() and Element.toFront().
In your case, it sounds like you want to draw the path, then draw the circle, then call either circle.toBack() or path.toFront().

Categories

Resources