Problem:
When zooming a heat map the gradient gets to thin (dillutedt) to be visible.
(google.maps.visualization.HeatmapLayer)
I have set
heatmap.setOptions({
//radius: 10,
opacity: 1.0,
//dissipating: false
});
to no avail.
I have experienced with radius and dissipating, no success.
For those reading this, here is the solution:
heatmap.setOptions({
dissipating: true,
maxIntensity: 10,
radius: 5,
opacity: 0.9,
//dissipating: false
});
Related
Can you tell me how to track the click only on the stroke and not inside the body of the figure. The shapes in which you want to trace this can be anything: Star, Rect, etc. Perhaps you have encountered this.
I can't even imagine how it could be done.
You need to draw a shape with fillEnabled: false so only its stroke is visible. And only its stroke will listen to events. If you want to keep fill, then you have to use two shapes. One for fill, another for stroke and events detection.
const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);
const shape = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 50,
stroke: 'green',
strokeWidth: 10,
fillEnabled: false
});
layer.add(shape);
shape.on('click', () => {
console.log('shape click');
})
<script src="https://unpkg.com/konva#^8/konva.min.js"></script>
<div id="container"></div>
I would like to change the color of the onHover effect in IFCjs viewer. Currently it is pink, it would be nice if it was lightGrey.
Can anybody help me do it?
Try this (change the preselectMat as you wish):
const preselectMat = new MeshLambertMaterial({
transparent: true,
opacity: 0.9,
color: 0xff0000,
depthTest: true,
});
viewer.IFC.selector.preselection.material = preselectMat
I'm trying to loop an animation with the Framer Motion library after a small delay. The animation itself will play when it's mounted, on the webpage refresh, however does not repeat. Iv'e looked through the docs and this seems to be similar syntax.
const AnimateTrial = {
initial: {
opacity: 0,
x: -100,
y: -35,
scale: 0.9,
},
animate: (i) => {
const delay = 5 + i * 0.5;
return {
opacity: 1,
x: -10,
y: -35,
transition: {
opacity: { delay, duration: 1.5 },
x: { delay, duration: 1.5},
repeatType: "Infinity",
repeatDelay: 5,
},
};
}
I have also tried passing:
transition={{ repeat: Infinity, repeatDelay: 5 }}
But am yet to have it work. Any ideas!
I can confirm the remainder of the animation works, but it does not loop.
Having never laid eyes upon a transition object nested inside an animate function, I had to take this to code sandbox.
I'm new to Framer Motion myself but there are multiple things that strike me as odd and how I would fix them:
Setting a duration on several properties within transition. I don't believe this is a supported feature, so I'm moving it for this answer as both your opacity and x properties share the same duration.
transition: {
duration: 1.5,
opacity: delay,
x: delay,
repeatType: "Infinity",
repeatDelay: 5
}
Setting a repeatType without a repeat will not loop the animation. Setting repeat: Infinite will (and you can drop the repeatType).
transition: {
duration: 1.5,
opacity: delay,
x: delay,
repeat: Infinity,
repeatDelay: 5
}
Note that we still do not have a repeating animation.
Using animate as a function. I'm not sure, but I think the entire function might only get evaluated once and immediately discarded. I believe that the second time Framer Motion looks at the delay value it fails, thus not animating that specific property. (I am also not sure what you are trying to achieve with using delay inside the x and opacity properties.)
If we change either the opacity or x to use 0 as a value rather than delay, you can see that it will behave as expected - whereas the unchanged property only animates once. Changing them both will display the looping behavior you are looking for:
transition: {
duration: 1.5,
opacity: 0,
x: 0,
repeat: Infinity,
repeatDelay: 5
}
Thus, we've reached our final code:
const AnimateTrial = {
initial: {
opacity: 0,
x: -100,
y: -35,
scale: 0.9
},
animate: (i) => {
const delay = 5 + i * 0.5; // (now unused)
return {
opacity: 1,
x: -10,
y: -35,
transition: {
duration: 1.5,
opacity: 0,
x: 0,
repeat: Infinity,
repeatDelay: 5
}
};
}
};
Here's a live demo showcasing the working animation loop. (I changed repeatDelay to 1 for testing speed purposes).
I have a green background green buttons with icons, so the buttons are "invisible" and only the icons appear:
I would like to set elevation to the icons, but of course when I set it creates the elevation around the button:
Is there a way to make the elevation around the icon itself? Maybe blur it somehow? For iOS I'm just using:
shadowColor: '#000000',
shadowOffset: { height: 1 },
shadowOpacity: 0.15,
shadowRadius: 4,
image inside the button appears blue. I cant figure out how to fix it.
Button(action: {self.count += 1}) {
Circle()
.fill(LinearGradient(gradient: Gradient(colors: [Color("linkAccount1"), Color("linkAccount2")]), startPoint: UnitPoint(x: 0, y: 0.2), endPoint: UnitPoint(x: 1, y: 1)))
.frame(width: 80, height: 80)
.shadow(color: Color("shadowColor1"), radius: 7, y: 7)
.overlay(
//issue with image backgroud or foregroundColor
Image("linkAccount")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60))
}
Solution:
Image("linkAcount").renderingMode(.original)
As per my comment above, the issue is caused by the rendering mode of the Image.
You can overcome the tinting problem by using the .renderingMode() modifier, and setting the mode to be .original. This tells the image to ignore the tint.
Image("linkAcount").renderingMode(.original)
Images and Text contained within a button get rendred in accent colour, which by default is blue, just apply:
.accentColor(.white)
to your Button to have the image drawn in white.