How to go about changing the tint color of an image? - reactjs

Sorry for the vague title, I have no idea how to really ask this question to be honest so I'll describe what I'm trying to do
I'm attempting to make an app where users can change the colors of different parts of a car. They can change the door for instance to a green as shown, or any other color they wish. They would then be able to change the color of the hood, or the roof, etc.
I've thought about having seperate images for each component and then lining them up to match. However this seems practically impossible when it comes to different screen sizes and scales. I also thought about making a blanket white image, and then creating views over the top with the selected color.
Does anyone have any ideas how I could possibly approach this?
Thankyou

I dont know about the performance of this. But, how about, an overlay of the different parts of the car, but using the same size of the whole car. For example, you have the image of the whole car, and erase all but the door. In other image, you erase all but the hood. If you lay one image above another, it will make the whole car, and the size of the screen will not affect you, because all the images will have the same size.
Then you can use the tint style to change the color of each layer.

Related

How to change Construct 2 coloring pictures

I have to change pictures in a Construct 2 coloring game and i don't know how get it.
There are a some .png file that contain the old pictures:
This pictures are loaded and generated i don't know how by the data.js file that cut and put in each hole
Anybody could help me ? I'm very lost with this.
There is a solution to this problem.
https://www.construct.net/en/forum/construct-2/how-do-i-18/create-coloring-game-134338
And if you're too lazy to look at it, here it is.
*One way would be to prepare all the colorizable elements of your illustration -- the regions within the black lines -- as separate white sprites (PNGs), with the ReplaceColor effect applied. Then when the user clicks in a "color palette" sprite, store the clicked color value as a global value, and assign this to the ReplaceColor effect of any clicked illustration sprite.
Depending on the complexity of your illustration, it could be a fair amount of work to position all the illustration sprites in the appropriate positions in the layout, but it should work.
There may be other options that treat the problem more like paint fills, but I'm not aware of how to do this.* -netdzynr

iOS 6 AutoLayout Scale and Translate Animation

My aim is to have 3 images shrink, grow, and move along a horizontal axis depending on selection. Using Auto Layout seems to make the images jump about as they try to fulfil the Top space to superview / Bottom space to superview constraints.
So to combat this I have put all the images inside their own UIView. The UIView is set to the maximum size the images can grow to, it is centred on the horizontal axis. So now all the images must do is stay centred inside their corresponding UIView. This has fixed my problem as the UIViews perform the horizontal translation, while the images shrink/grow inside while remaining centred. My question is - is this the correct way to do this? It seems very long and like I am perhaps misusing the ability of Auto Layout. I have to perform similar tasks with more images and so any advice is welcome! Thanks.
I've just written a little essay on this topic here:
How do I adjust the anchor point of a CALayer, when Auto Layout is being used?
Basically autolayout does not play at all well with any kind of view transform. The easiest solution is to take your view out of autolayout's control altogether, but alternatively you can give it only constraints that won't fight back against the particular kind of transform you intend to apply. That second solution sounds like just the sort of thing you're doing.

Changing color of an image - at runtime

Im going to make a new application for a car dealership. They basically want a WPF/silverlight application where one can slect a car (model) and then via a color palette choose the color of the car (from predefined colors). They also need to be able to different kind of rims, headlights and interior.
what is the best/easiest approach for this. Been thinking on having all the different images and then just swap them out when the selection changes. This, however has the potentional problem of all images with all combinations does not exist (eg. a red VW, metallic rims, white leather interior) etc.
Is there any other approach to this? replacing colors? Having a basic model and then copying the "body" of the car on top, copy rims on top etc. and then just having to enable/disable a particular "layer" of the images?
I would do this by using different layers: the basic model with the car's color as translucent part, on top of this pictures with the different add-ons, the background color is the car's color. The trick is to fit everything together that it looks good.
Depending on the color (maybe you want to have shadows or chrome effects), you could have one model's picture for each color, and then add the add-ons and the interior on top of this.

Some animation requests in a Silverlight application

I am making a flash card application. It shows the question and then a textbox for user input, all wrapped in a border or rectangle. So what I want is an animation that "flips" the rectangle or border upside-down and then their is text on the "back". Also, I want my application to APPEAR transition from one card to another by "flying off" the screen then "another" card comes in to replace the other one in the opposite direction. But actually I'm want just a little animation of the border or rectangle moving off the screen then coming back in, but in the opposite direction. Some help would be appreciated, like what kind of animation can accomplish this and maybe a small code sample to demonstrate. I am not asking you write all this, I think that would be a little rude (unless you really want to).
Have you had a look at the Silverlight FX stuff? There might be some animations in there that are what you are looking for. There are also samples provided.
http://projects.nikhilk.net/SilverlightFX
Michael

Ensure text remains always readable in Silverlight

We have a Silverlight application that shows text over video. Both the text and video can be considered variables. Sometimes we might have a dark video, sometimes a bright video, sometimes a video that has sections of both.
Think of credits at the end of a movie. We want to ensure the end user can always read the text being show over the video. The text is always an overlay on top of the video.
The simple solution is to two show the text twice once in white and once in black with a small offset. This almost works but actually looks a little rough, and takes away from the user experience.
Ideally we would have the text with slight semitransparent glow around the edges. So if the text were white there would be a black glow right around the edges.
Is there a way to do this? Or is there an equal or better work-around?
I've done this with the DropShadow pixel shader effect in Silverlight 3. It works nicely, but since the pixel shaders aren't executed on the hardware, it can have a pretty heavy impact on the performance of the application.
If you wanted to get ambitious, you could write your own pixel shader. Silverlight 3 supports HLSL Shaders.
You could try displaying it with a contrasting outline, rather than just a "drop shadow" like you get if you display it once with a small offset. To do this, display it four times in one color, then a fifth time with a contrasting color, centered over the four previous copies. The four first ones should be offset one pixel up, right, down and left of the center.
The net effect should be an outline. Of course, perhaps this too looks "rough", since it's computer-generated and thus not perfect with respect to issues like kerning, spacing between characters, and so on. But it's quick to try, at least.
In general, automatically finding good contrasting colors when the background is video sounds a bit difficult. In the worst case, the video contains text just like the one you want to display. The correct solution in that case is hard to imagine.
Sounds similar to the problem of ensuring subtitles are always readable in films/TV. The most robust, but not necessarily most elegant solution, is to have a coloured background rectangle for the text which is either opaque or has a low transparency value - often grey or black with good contrasting foreground colour.

Resources