I have a simple fuction which fills the drawn image if the user chooses to
canvas.on('mouse:up', function() {
if(main.mode == 'fill') {
var object = main.canvas.item(main.canvas.getObjects().length-1);
object.fill = main.pColor();
canvas.renderAll();
}
})
this works fine for solid(opacity 1) colors. When using a color with less opacity:
It seems the stoke and fill overlap yielding a darker line.
I experimented with globalCompositeOperation. I am thinking eliminate the stroke or set the stroke opacity to zero. I hope there is a better answer.
I tried a few approaches: setting stroke opacity to zero and trying to get rid of the stroke altogether.
what works best is adding
object.set('strokeWidth', 0);
to the handler above.
set ensures the canvas will be updated.
It is working well.
Related
I want to draw a line to show the zero value on a y axis. I have this working:
afterDraw(chart) {
const {ctx, scales} = chart;
Object.keys(scales).forEach((key) => {
const scale = scales[key];
if (scale.axis !== 'y') {
return;
}
const yCoordinate = scale.getPixelForValue(ZERO_COORDINATE);
ctx.fillStyle = 'blue';
ctx.fillRect(0, yCoordinate, 200, 5);
});
},
I had first attempted to use afterBuildTicks, but that didn't draw the line - or at least it wasn't visible. Is there guidance regarding when to use the different lifecycle hooks? Some seem obvious, others less so.
If I use the chart's context in any lifecycle hook, how do I ensure what I draw is on top of the chart? I saw an example where someone changed the background by supplying a beforeDraw callback - is the stacking context managed by order in which we draw via the different hooks?
There is a diagram in the chart.js documentation that shows when each hook is being called in the rendering process and what chart.js does between those hooks like drawing datasets, grids etc.
If you want to make sure what you are drawing is on top of everything else you will need to use the afterDraw hook to draw the things on the canvas that you want there.
I noticed that whenever I create a view it automatically gets a white background color. If you insert a list however, no matter the size, the entire view seems to get a sort of grey background, which looks better to me than a white background. I'm wondering how I can get my background to look like this (without using a list, or an invisible dummy list maybe)? I've already tried getting the color code but that just gives me a dark grey background. I tried adjusting the opacity but it just isn't the same as the native one.
edit: It appears the size of the list does matter, it seems to have something to do with NavigationViews and NavigationLinks
That is the default group table view background color (systemGroupedBackground) with the color code #F2F2F7. You can use it as a background color like this:
.background(Color(red: 0.949, green: 0.949, blue: 0.97, opacity: 1.0))
...or simply:
.background(Color(.systemGroupedBackground))
Keep in mind that with the latter solution, the color might change in later iOS versions if Apple decides to change the value of the constant.
I'm trying to make a Famo.us game where I have a background Image ( an ImageSurface ) and then I put a bunch of other ImageSurfaces over the top and animate them. However the background surface doesn't stay in the background, for starters new ImageSurfaces are drawn underneath, then weirdly they start getting drawn on top. Exact same code generating the surfaces.
the background image has a Transform.behind applied to it.
The image below kind of shows the problem, some of the small squares are behind, and some are on top.
If it makes any difference, the surfaces are all in a HeaderFooterLayout
Any ideas whats going wrong? or how I could debug this?
check the zIndex value of the surfaces isn't the same as the zIndex of the white surface you're attempting to hide them behind. If they are the same (or unspecified) the browser hazards a guess, and you end up with z-fighting where the GPU can't actually decide what to render (the white surface or the tabs?) You could have your tabs resting on one zIndex value, and the white surface on the other.
(The following is written by Keith) For anyone else, what I did was add the following to the ImageSurface
properties: {
zIndex: -1000000
}
Oddly I tried with a zIndex of -10 etc, which didn't work, only once I made that zIndex huge did it seem to fall behind everything else.
I currently have the following working fiddle
var moveAnim = Raphael.animation({ progress: 1 }, 5000, 'bounce').repeat(Infinity);
I animate a circle along a line.
I also want to make the circle flash at the same time but I can't seem to work out a way to do this?
I thought about adding the circle to a set and applying the additional animation to this but I can't see to get this either!
Any ideas?
This is a hack and I make no attempt to hide it, but it could be made a bit nicer.
There's a couple of problems depending on 'how' you want to animate the flash. The main problem is having 2 simultaneous animation on the same object, as Raphael doesn't do this (to my knowledge). Its easier if you want to animate an alternate attribute than the same one. If you want to animate a scale to indicate a flash, you will need to append the scale transform to the end of the path transform string ('t,s').
Example here, just uses opacity attribute.
Probably the nicest method would be to include something that figures out time running and amends an attribute manually within the animation function (paper.customAttributes.progress). However, that will probably take a bit longer.
Another alternative could be to animate another object off screen, that does all the calculations for you. It feels a bit ugly, but should work.
So earlier we create a dummy object off screen...
var dummy = paper.circle(-100,-100,10).attr({ opacity: 0 });
Within the progress func, you can then set the real circles opacity to be the same as the offscreen one.
this.attr('opacity', dummy.attr('opacity'));
And we get the dummy animation triggering later
dummy.animate(flashingAnim);
jsfiddle
As mentioned, I think there are cleaner ways, but may involve you writing a small linear animation func separately, but this may help if performance isn't an issue and you don't mind extra elements in the dom.
An alternative solution that I came up with is a looping callback. The very sound of a looping callback sounds ugly but I guess thats what an animation is?
It does appear that you can attach multiple animations to an element! Here's a an example
function animateIn() {
flashingCircle.animate({ fill: '#f00' }, 1000, animateOut);
}
function animateOut() {
flashingCircle.animate({ fill: '#fff' }, 1000, animateIn);
}
animateIn();
How do one use colors with enableShadowWithOffset?
As soon as I use it, it seems that the label color itself is changed to black as well as the shadow itself which is also black. Setting the font to any color seems to have no effect.
Setting color something like this
myttflabel.color = ccc3(255, 0, 0);
It would be nice to specify colors of:
the text itself
the shadow
For the sake of, here is how I currently use the shadow with cclabelttf:
CCLabelTTF* labelSlotid = [CCLabelTTF labelWithString:[NSString stringWithFormat:#"%d", menuitem.tag] fontName:#"GillSans-Bold" fontSize:11];
[labelSlotid enableShadowWithOffset:CGSizeMake(1, 1) opacity:1 blur:1 updateImage:YES];
labelSlotid.color = ccc3(255, 0, 0);
[menuitem addChild:labelSlotid];
Not sure but without setting updateImage to YES, no shadow is actually drawn.
Edit: I found setFontFillColor. It seems to work wonders. (Why didn't I see it before)
The anser is setFontFillColor. However, there seems to be no direct way of setting shadow color.