Hey Community/(Piotr Adam),
My raycaster just should interact with elements with the class "clickable". This works fine but my mouse still activates every element how can i let my mouse know that it should just interact with "clickable" elements?
Here a bit code but i guess its not necessary:
<a-scene cursor="rayOrigin: mouse">
<a-entity rotation="0 90 0">
<a-camera user-height="0" look-controls>
<a-cursor fuse="true" fusetimeout="2000"
position="0 0 -0.1"
raycaster="objects: .clickable"
geometry="primitive: ring;
radiusInner: 0.002;
radiusOuter: 0.003"
material="color: red; shader: flat">
<a-animation attribute="scale"
to="3 3 3"
dur="2000"
begin="cursor-fusing"
fill="backwards"
easing="linear">
</a-animation>
</a-cursor>
<a-entity id="redcircle" position="0 0 -0.1"
geometry="primitive: ring;
radiusInner: 0.007;
radiusOuter: 0.0077"
material="color: red; opacity: 0.25; shader: flat"></a-entity>
</a-camera>
</a-entity>
Just throw the whitelist piece to the scene, where you have your mouse cursor:
<a-scene cursor="rayOrigin: mouse" raycaster="objects: .clickable">
fiddle here.
But ideally it would be if you had some piece of code setting up either one cursor or another depending on your needs.
Related
My question: Can svg <marker> elements inherit color from the <line> they are referenced on?
The background: I have a D3 graph that has different styled lines, and I want my lines to have arrows at the end.
So at the top of my <svg> I have const defs = svg.append('defs'); and then further along I generate my defs using a generator function:
function makeDefs(defs: Selection<SVGDefsElement, unknown, null, undefined>, color: string, status: string) {
const markerSize = 3
const start = defs.append
.append('marker')
.attr('id', `arrow-start-${color}-${status}`)
.attr('viewBox', '-5 -10 20 20')
.attr('markerWidth', markerSize)
.attr('markerHeight', markerSize)
.attr('orient', 'auto-start-reverse');
start
.append('path')
.attr(
'd',
status === 'PUBLISHED' ? customPaths.arrowLarge : customPaths.arrowSmall
)
.attr('stroke', color)
.attr('fill', color);
}
And use it like so:
makeDefs(defs, 'red', 'DRAFT');
And then I add the markers to my lines with:
// d3 code to draw the lines etc
line.attr(
'marker-start',
(d) =>
`url(
#arrow-start-${d.color}-${d.status}
)`
);
This all works great, my arrows have lines. But my current setup feels burdensome and clunky. I have about 20 colors and 3 statuses. With my current setup that would be 60 different:
makeDefs(defs, 'one-of-20-colors', 'one-of-3-statues');
My understanding of markers is that they can inherit color using the currentcolor attribute. Currently my <defs> sit up top underneath my main <svg> so any color inherited is inherited directly from that top level svg which is not what I want. The issue in my case is my <line> elements are the elements who's color I want to inherit, but according to the MDN docs <line>s cannot have <defs> as children, thus leaving me with the only option, of defining all my <defs> up front all at once.
Is there a trick or some attribute I'm missing here?
Any way to pass color to my marker when doing:
line.attr(
'marker-start',
(d) =>
`url(
#arrow-start-${d.color}-${d.status}
)`
);
?
For what is is worth, I'm currently wrapping all my <line>s in <g>. I suppose I could wrap them in <svg>s instead, and apply the fill and stroke there, and then define my <defs> per svg container? I tried this briefly and swapping the <g> for an <svg> broke a lot, but I'm not even sure if it would work, or be better for that matter.
I search for a easy and efficient way to center all childs in a container using basic package. (Because mixing basic and jewel layouts leads to some unwanted sides effects)
Must I use CSS, beads ? If both are usable what is difference and can I have code sample of each ?
For exemple could you tell me how to modify this code to center the text label:
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:initialView>
<js:View>
<js:beads>
<js:VerticalLayout/>
</js:beads>
<js:Label text="How to center me on horizontal axis ?"/>
</js:View>
</js:initialView>
</js:Application>
Thanks to yishayw, as I'm not familiar with how to add css, I find how to do it and put the full working code here. I would expect that js|View would trigger the style but looking on css with browser I saw that style name for first "view" is "royale"
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:j="library://ns.apache.org/royale/jewel"
xmlns:js="library://ns.apache.org/royale/basic" xmlns:local="*">
<fx:Style>
#namespace j "library://ns.apache.org/royale/jewel";
#namespace js "library://ns.apache.org/royale/basic";
.royale {
align-items :center;
}
js|Label {
color: #ff0000;
}
</fx:Style>
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
</js:valuesImpl>
<js:initialView>
<js:View >
<js:beads>
<js:VerticalFlexLayout />
</js:beads>
<js:Label text="How to center me on horizontal axis ?"/>
</js:View>
</js:initialView>
</js:Application>
Regards
Try using VerticalFlexLayout and adding align-items: center to the style of the container.
Is it possible to have smooth zoom in effect on svg element?
I'm using svgpan script and understand that the zoom in is control by transform attribute.
transform="matrix(0.6,0,0,0.6,0,0)
Can add 'transition' to make the transition smoothly when zoom in function is apply?
sample:
http://www.cyberz.org/projects/SVGPan/tiger.svg
idea smooth transition:
http://vectorflower.com/preview/smooth_zoom/
You need to change:
<g id="viewport" transform="translate(200,200)">
Into something like that:
<g id="viewport" style="transition: transform 300ms linear;transform: translate(200px, 200px)">
And line ~143 of SVGPan.
Change:
element.setAttribute("transform", s);
Into:
element.style.transform = s;
And keep your $11 in pocket :)
I have a layout where I need to control the line height between wrapped non block level elements:
<p class="payments"><small class="light">You Pay</small><abbr title="GBP">£</abbr>121.50<br><small>per month</small></p>
What I want to achieve is something like:
I don't want to rely on absolute positioning as there will be elements beneath which need to clear this and simply setting a low line-height on he paragraph results in an object which breaks out of its box, see the Fiddle below:
http://jsfiddle.net/mdHKy/2/
Any ideas?
You can first give the p a height then set its line-height to half that amount (being 2 lines).
p.payments {
line-height: 1em;
height:2em;
}
Then set the line-height of small to 1em and give that a vertical-align:
p.payments small {
line-height:1em;
vertical-align:top;
}
Then set the vertical-align of your .light:
p.payments small.light {
vertical-align:baseline;
}
JSFiddle example.
I am trying to place an SVG Text-element according to the width and height of the text by getting the bounding box using the getBBox() method.
If the text is using a websafe font, this works reasonably well across different browsers, but if the text is styled using #font-face and a custom webfont, then the width of the text is returned incorrectly in Firefox (Mac) and Safari (iOS).
It works perfectly in both Safari (Mac) and Chrome (Mac).
If the gray box has the same width as the text, then it works in that browser.
Does anybody have an idea on how to get the correct width of the text bounding box in all browsers?
The browser is calculating the bounding box before it has finished loading/applying #font-face, assuming you don't need IE, you can wrap your BBox calculation function inside a document.fonts.ready promise...
document.fonts.ready.then(() => const bbox = textEl.getBBox());
Here is an example at work that exhibits the problem and the fix:
const xmlns = "http://www.w3.org/2000/svg";
const correct = document.getElementById("correct");
const incorrect = document.getElementById("incorrect");
visualizeBBox(incorrect);
document.fonts.ready.then(()=> visualizeBBox(correct));
function visualizeBBox(el){
const bbox = el.getBBox();
const rect = document.createElementNS(xmlns, "rect");
for (prop in bbox) rect.setAttribute(prop, bbox[prop]);
document.querySelector("svg").appendChild(rect);
}
svg text {
font-family: 'Diplomata SC', serif;
}
svg rect {
stroke: red;
fill: none;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Diplomata+SC&display=swap" rel="stylesheet">
<svg xmlns="https://www.w3.org/2000/svg" width="600" height="400">
<text x="0" y="40" font-size="24" id="correct">Correct dimensions</text>
<text y="100" font-size="24" id="incorrect">Incorrect dimensions</text>
<svg>
Today I ran into similar issue. Duopixel is right that getBBox() might return momental metric which may be unexpected because external font hasn't been loaded yet and some standard font is used instead.
The problem in WebKit (tested in Chrome 24.0.1312.52 and 26.0.1389.0 canary) is that the browser defers external font loading until it is first effectively used anywhere on the page. So even if you wait for onreadystatechange to become "complete" you are not guaranteed to have font metrics ready when calling getBBox() - you may still be the first one rendering a text styled with external font, inserting it into the document and immediately calling getBBox() on it (my case).
My workaround instead of calling mySVGInitCode() directly I do:
$("body").append(
$("<div/>")
.attr("class", "force-external-font-loading")
.attr("style", "font-family: \"xkcd\";visibility:hidden;position:absolute")
.text("x")
);
setTimeout(function(){ mySVGInitCode() }, 100); // 100ms is just arbitrary waiting time which should be sufficient for fetching the external font on a fast network, anyone has a better solution?
As you can see I dynamically insert absolutely positioned styled piece of text to force external font loading (visibility:hidden is important here instead of display:none). Then I wait some time before I execute my SVG code which could potentially render something and then immediately ask for metrics.