MonoTouch - UIButton with custom gradient - xamarin.ios

Trying to create a custom UIButton in MonoTouch using CGGradientLayer.
Following along with a few tutorials I've found online such as:
http://www.apptite.be/tutorial_custom_uibuttons.php#gradients
So far can't get anything to display, currently just an empty button.
Here's my code which is running from ViewDidLoad:
var gradient = new CAGradientLayer();
gradient.Colors = new MonoTouch.CoreGraphics.CGColor[]
{
new MonoTouch.CoreGraphics.CGColor(115f, 181f, 216f, 1f),
new MonoTouch.CoreGraphics.CGColor(35f, 101f, 136f, 1f)
};
gradient.Locations = new NSNumber[]
{
.5f,
1f
};
gradient.Frame = btnSearch.Layer.Bounds;
btnSearch.Layer.AddSublayer(gradient);
btnSearch.Layer.MasksToBounds = true;
Any ideas what I've missed?
Thank you :)

Seems like that constructor of CGColor accepts RGB values in 0.0f-1.0f float range, not 0-255 integers.
As an alternative, try to set CGColors by UIColors:
gradient.Colors = new MonoTouch.CoreGraphics.CGColor[]
{
UIColor.FromRGB (115, 181, 216).CGColor,
UIColor.FromRGB (35, 101, 136).CGColor
};
BTW, nice blue gradient :)

Related

Three.js doesn't fill shape with custom texture/color spectrum

I have a requirement to draw a polygon and fill it with custom color spectrum.
For color spectrum: after google, I found this post which shows me how to generate a color spectrum the way I need.
For polygon: I choose THREE.Shape() so I can define where to draw it.
Put things together: it works fine with mono color like material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide }); but it shows nothing when I use color spectrum. You can find my code here (which I forked from here).
Please point me where I do thing wrong.
To not waste your time viewing code, here is snippet:
var curveShape = new THREE.Shape();
curveShape.moveTo(0, 0);
curveShape.lineTo(5, 7);
curveShape.lineTo(2, 9);
curveShape.lineTo(8, 11);
curveShape.lineTo(10, 15);
curveShape.lineTo(9, 16);
curveShape.lineTo(7, 20);
curveShape.lineTo(0, 20);
// geometry
var geometry = new THREE.ShapeGeometry(curveShape);
// material texture
var texture = new THREE.Texture(generateTexture());
texture.needsUpdate = true; // important!
// material
var material = new THREE.MeshBasicMaterial({
map: texture,
overdraw: 0.5,
side: THREE.DoubleSide
});
// mesh
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
The problem is that you are just using moveTo() in order to draw your shape. But this method only sets the internal current point of the shape to the given coordinates. To create a real contour, use methods like lineTo().
var curveShape = new THREE.Shape();
curveShape.moveTo(0, 0); // define start point
curveShape.lineTo(5, 7); // draw a line from the current point to the given coordindates
Full example based on your code snippet: https://jsfiddle.net/f2Lommf5/12600/

Draw Threejs TextGeometry along the path

I have some model and want cover it with text.
I've rendered and bended TextGeometry but it is difficult to combine these two meshes.
(Аnd yes, I've tried the dynamic textures, this way prohibits the use of own fonts)
scrinshot of existing model
Perhaps there is another way to draw the text along the path?
As you want to cover it with text, why not to use textures.
You can set it from a picture with THREE.TextureLoader() or you can draw your own on a canvas and apply it to a texture with var texture = new THREE.Texture(canvas);
For exmaple:
var texture = new THREE.Texture(canvas);
texture.repeat.set(5, 1);
texture.needsUpdate = true;
See the jsfiddle example.
There you can uncomment those lines
//texture.wrapS = THREE.RepeatWrapping;
//texture.wrapT = THREE.RepeatWrapping;
and see, how the result will change.
UPD. I've updated the fiddle. Used the trick with WebFontLoader (from this SO)
WebFontConfig = {
google: {families: ['Monoton']},
active: function() {
init();
animate();
},
};
(function(){
var wf = document.createElement("script");
wf.src = 'https://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.26/webfontloader.js';
wf.async = 'true';
document.head.appendChild(wf);
})();

Sprite cannot be fixed in 2D in Phaser

I am running ubuntu 14.04 with Phaser (v2.3.0 "Tarabon" - Built: Thu Mar 26 2015 02:36:37).
I am trying to have two sprites where one of them (yellowRectangle) should be fixed and the other one (redSquare) moves toward the fixed sprite.
The issue is that the sprite that should be fixed still moves when the two sprites collide.
I attempted the workaround to set yellowRectangle.physicsType = Phaser.SPRITE;
but it does not help.
Here is the short program:
var game = new Phaser.Game(width="100", height="100", Phaser.AUTO,'pressIt', { preload: preload, create: create, update:update });
var redSquare; var yellowRectangle;
function preload() {
game.load.image('redSquare', '/redSquare25x25.png');
game.load.image('yellowRectangle', '/yellowRectangle100x10.png');
}
function create() {
game.physics.startSystem(Phaser.Physics.P2JS);
redSquare = game.add.sprite(x=game.world.centerX, y=35, 'redSquare');
game.physics.p2.enable(redSquare);
yellowRectangle = game.add.sprite(x=game.world.centerX, y=game.world.height - 100, 'yellowRectangle');
//was suggested to add due to bug in Phaser, but does not fix it
//yellowRectangle.physicsType = Phaser.SPRITE;
game.physics.p2.enable(yellowRectangle);
yellowRectangle.body.moves = false;
yellowRectangle.immovable = true;
};
function update() {
redSquare.body.force.y = 500;
};
You should set the yellow rectangle as immovable like this:
yellowRectangle.body.immovable = true;
You just forgot the body part ;)
Hope it helps!

Drag and zoom text with Kineticjs

I am trying to zoom and pan a text which is draggable already. All the examples are on images or shapes and it seems I cannot adapt it to a text object. My questions are:
Do I have to use the anchors or is any simpler way zoom a text with Kineticjs?
I found an example regarding zooming a shape and the code crashes here:
var layer = new Kinetic.Layer({
drawFunc : drawTriangle //drawTriangle is a function defined already
});
Can we call a function while we are creating a layer?
I usually create a layer and then add the outcome of the function in it.
Any idea would be great, thanks.
I thought of many ways you could do this but this is the one I ended up implementing: jsfiddle
Basically, you have an anchor (which doesn't always have to be there, you can hide and show it if you would like. Let me know if you need help with that) and if you drag the anchor down it increases the fontSize, and if you drag the anchor up it decreases the fontSize.
I followed the exact same anchor tutorial but instead I added a dragBoundFunc to limit dragging to the Y-axis:
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false,
dragBoundFunc: function (pos) {
return {
x: this.getAbsolutePosition().x,
y: pos.y
};
}
});
And then I updated the updateAnchor() function to only detect the single anchor I added to the group named sizeAnchor:
var mY = 0;
function update(activeAnchor, event) {
var group = activeAnchor.getParent();
var sizeAnchor = group.get('.sizeAnchor')[0];
var text = group.get('.text')[0];
if (event.pageY < mY) {
text.setFontSize(text.getFontSize()-1);
} else {
text.setFontSize(text.getFontSize()+1);
}
sizeAnchor.setPosition(-10, 0);
mY = event.pageY;
}
Basically mY is used compared to the e.PageY to see if the mouse is moving up or down. Once we can determine the mouse direction, then we can decide if we should increase or decrease the fontSize!
Alternatively, you can use the mousewheel to do the exact same thing! I didn't implement it myself but it's definitely doable. Something like:
Mousewheel down and the fontSize decreases
Mousewheel up and the fontSize increases
Hopefully this emulates "Zooming" a text for you. And I guess being able to drag the text acts as "panning" right?
UPDATE (based on comment below)
This is how you would limit dragging to the Y-Axis using dragBoundFunc:
var textGroup = new Kinetic.Group({
x: 100,
y: 100,
draggable: true,
dragBoundFunc: function (pos) {
return {
x: this.getAbsolutePosition().x,
y: pos.y
};
}
});
See the updated jsfiddle (same jsfiddle as above)

Is it possible to animate filter in Fabric.js?

Is it possible to animate the images filter in Fabric.js? Such as a "pixelate" filter.
I solved it in the same way like the demo.
Unfortunately filters aren't able to be animated - they need too much processing time.
Here's my Code:
image = ... //Image, where the filter should be applied
var filter = new fabric.Image.filters.RemoveWhite({
threshold: 0,
distance: 140
});
image.filters.push(filter);
image.applyFilters(canvas.renderAll.bind(canvas));
animate(image,1, 400); //Start the Animation
function animate(image,value, stop){
value += ((stop-value)*0.02); //Change the threshold-value
if (image.filters[0]) {
image.filters[0]['threshold'] = value;
console.log(value);
image.applyFilters(canvas.renderAll.bind(canvas)); //Start creating the new image
if(value<stop-100){
setTimeout(function(){act(image,value,stop);},1);
}
}
}
I know the code isn't the most efficient one, but it works. And you can see that Animating filters consumes too much time.
(I tested it with a 1920x1080px image, maybe you can use it with smaller images)
Here is a updated version for the brightness filter
var brightnessValue = 0.9;
var brightnessFilter = new fabric.Image.filters.Brightness({
brightness: brightnessValue
});
fabricImage.filters.push(brightnessFilter);
fabric.util.requestAnimFrame(function brightnessFilterAnimation() {
brightnessValue = brightnessValue - 0.04;
brightnessFilter.brightness = brightnessValue;
fabricImage.applyFilters();
if (brightnessValue > 0) {
fabric.util.requestAnimFrame(brightnessFilterAnimation);
}
});

Resources