Is there any way I can create the below image using textfield border in Titanium appcelerator ? I dont want to use the image . Please help .
How about views? Change shape's position and width as necessary. Efficient? /shrug
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
// no background color
var shape = Ti.UI.createView({
height: '300dp',
width: '200dp'
});
var color = "blue";
var bottom = Ti.UI.createView({
height: '1',
left: 0,
right: 0,
bottom: 0,
backgroundColor: color
});
var left = Ti.UI.createView({
width: '1',
height: '10',
left: 0,
bottom: 0,
backgroundColor: color
});
var right = Ti.UI.createView({
width: '1',
height: '10',
right: 0,
bottom: 0,
backgroundColor: color
});
shape.add(bottom);
shape.add(left);
shape.add(right);
win.add(shape);
win.open();
This image is showing the line which would appear under android textfield in holo theme. You might wanna have a look at this question How to use Holo.Light theme, and fall back to 'Light' on pre-honeycomb devices?
Related
i want to override Backrdrop.js file in my componenet
File path : react\node_modules\#material-ui\core\Backdrop\Backdrop.js
default style :
var styles = {
root: {
zIndex: -1,
position: 'fixed',
right: 0,
bottom: 0,
top: 0,
nd I want to set top value 0 to 58 or other value. How to do override in component.
I created a "circle bar" (group of views) that switch from grey to yellow as the images move. The circles start to transform correctly but then go back to the first spot instead of going to the next circle spot to indict that you are on the next image. The yellow circle just always goes back to the first spot no matter what. Does anyone know why this might be happening?? How do I get it to stay in the next spot?
PLEASE see this video that I made of it: https://youtu.be/BCaSgNexPAs
Here is how I create and handle the circle view transformations:
let circleArray = [];
if (this.state.imgArray) {
this.state.imgArray.forEach((val, i) => {
const scrollCircleVal = this.imgXPos.interpolate({
inputRange: [deviceWidth * (i - 1), deviceWidth * (i + 1)],
outputRange: [-8, 8],
extrapolate: 'clamp',
});
const thisCircle = (
<View
key={'circle' + i}
style={[
styles.track,
{
width: 8,
height: 8,
marginLeft: i === 0 ? 0 : CIRCLE_SPACE,
borderRadius: 75
},
]}
>
<Animated.View
style={[
styles.circle,
{
width: 8,
height: 8,
borderRadius: 75,
transform: [
{translateX: scrollCircleVal},
],
backgroundColor: '#FFD200'
},
]}
/>
</View>
);
circleArray.push(thisCircle)
});
}
And here's my code for how I handle the image swiping:
handleSwipe = (indexDirection) => {
if (!this.state.imgArray[this.state.imgIndex + indexDirection]) {
Animated.spring(this.imgXPos, {
toValue: 0
}).start();
return;
}
this.setState((prevState) => ({
imgIndex: prevState.imgIndex + indexDirection
}), () => {
this.imgXPos.setValue(indexDirection * this.width);
Animated.spring(this.imgXPos, {
toValue: 0
}).start();
});
}
imgPanResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: (e, gs) => {
this.imgXPos.setValue(gs.dx);
},
onPanResponderRelease: (e, gs) => {
this.width = Dimensions.get('window').width;
const direction = Math.sign(gs.dx);
if (Math.abs(gs.dx) > this.width * 0.4) {
Animated.timing(this.imgXPos, {
toValue: direction * this.width,
duration: 250
}).start(() => this.handleSwipe(-1 * direction));
} else {
Animated.spring(this.imgXPos, {
toValue: 0
}).start();
}
}
});
Html:
<Animated.Image
{...this.imgPanResponder.panHandlers}
key={'image' + this.state.imgIndex}
style={{left: this.imgXPos, height: '100%', width: '100%', borderRadius: 7}}
resizeMethod={'scale'}
resizeMode={'cover'}
source={{uri: this.state.imgArray[this.state.imgIndex]}}
/>
<View style={styles.circleContainer}>
{circleArray}
</View>
It's hard to get your code at first as it's all in the same spot.
I would first suggest breaking your code into smaller parts: ImageView, CirclesView
Now after we got that done, I would want to try to make the CirclesView a bit simpler (unless you really want this animation view inside the circle).
But from your code, I didn't see the difference for the "selectedImage" (imgIndex)
As it has calculations for each index, but with no reference to the selected image.
Rough ballpark code I would think to do with the current code:
let circleArray = [];
if (this.state.imgArray) {
this.state.imgArray.forEach((val, i) => {
const scrollCircleVal = this.imgXPos.interpolate({
inputRange: [deviceWidth * (i - 1), deviceWidth * (i + 1)],
outputRange: [-8, 8],
extrapolate: 'clamp',
});
const thisCircle = (
<View
key={'circle' + i}
style={[
styles.track,
{
width: 8,
height: 8,
marginLeft: i === 0 ? 0 : CIRCLE_SPACE,
borderRadius: 75
},
]}
>
// LOOK AT THIS LINE BELOW
{this.state.imgIndex == i &&
<Animated.View
style={[
styles.circle,
{
width: 8,
height: 8,
borderRadius: 75,
transform: [
{translateX: scrollCircleVal},
],
backgroundColor: '#FFD200'
},
]}
/>}
</View>
);
circleArray.push(thisCircle)
});
}
checkout the line I added above the "animated" circle for the "selected" circle
I would agree with most of Tzook notices ... but from what I see in code (intentions) all circles are animated (but in fact only one pair affected - one hides, one shows) - animating only selected one doesn't give that.
I animated hundreds 'sliders/galleries' in flash ;) - what with prev/next/neighborh images - shouldn't be animated at the same time?
Images with the same width (or when you can accept margins between them) are easy, you can animate container with 3 (or even only 2) images from longer (looped of course?) list/array. It's like virtual list scrolling.
Having this working circles will be easy, too - animate only 3 of them: prev/curr/next ones.
Simple animations are easy - only swapping images at the end of animation. It could look harder with f.e. bouncing effects (when image slides more/farther than it's target position and next img should be visible for a while) but you can just swap them earlier, just after recognizing direction.
I wanted to put custom label on highcharts which should be placed on left
side of scrollbar. How can I get top and left position of scrollbar.?
I have put label with following code
chart.renderer.text('<span style="font-weight:600;"> 1-21 </span>', 20, 120)
.css({
color: 'green',
fontSize: '12px'
})
.add();
You can get position of the scrollbar using chart.xAxis[0].scrollbar.group.translateX and chart.xAxis[0].scrollbar.group.translateY, for example: https://codepen.io/anon/pen/KeBxNj?editors=1010
Snippet:
var chart = Highcharts.chart('container', {
chart: {
type: 'bar',
marginLeft: 150,
events: {
load: function () {
var scrollbar = this.xAxis[0].scrollbar,
bbox;
// Render:
this.customLabel = this.renderer.text('<span style="font-weight:600;"> 1-21 </span>', 0, 0).attr({
zIndex: 5
}).add();
// Get bbox
bbox = this.customLabel.getBBox();
// Position label
this.customLabel.attr({
x: scrollbar.group.translateX - bbox.width,
y: scrollbar.group.translateY + bbox.height
});
}
}
},
...
});
You can determine the scrollbar's left position using the chart.plotWidth + chart.plotLeft - 25. Also, the top position can be got using chart.plotTop + 10.
The numeric values are just top and left paddings.
Please have a look at this codepen.
https://codepen.io/samuellawrentz/pen/eKjdpN?editors=1010
Hope this helps :)
I'm using some custom attributes while I'm creating my objects. For example in this case "name" and "icon":
$scope.addRoundRect = function () {
var coord = getRandomLeftTop();
var roundrect = (new fabric.Rect({
left: coord.left,
top: coord.top,
fill: '#' + getRandomColor(),
width: 250,
height: 250,
opacity: 1,
scaleX: 1,
scaleY: 1,
angle: 0,
rx: 10,
ry: 10,
strokeWidth: 0,
name: "Rounded Rectangle",
icon: "crop-square"
}));
canvas.add(roundrect).setActiveObject(roundrect);
};
This is my copy/paste function. As you can see I have already tried to paste the relevant attributes – bu I think that they are simply not cloned with the object:
function copy() {
canvas.getActiveObject().clone(function (cloned) {
_clipboard = cloned;
});
}
function paste() {
_clipboard.clone(function (clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
name: clonedObj.name,
icon: clonedObj.icon,
});
if (clonedObj.type === 'activeSelection') {
clonedObj.canvas = canvas;
clonedObj.forEachObject(function (obj) {
canvas.add(obj);
});
clonedObj.setCoords();
} else {
canvas.add(clonedObj);
}
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll();
});
To make it short: is there a way to clone and paste also this attributes without having to modify the source (ie. impleneting a full fledged custom attribute in the JSO serialization)?
var canvas = new fabric.Canvas('c');
var roundrect = new fabric.Rect({
left: 50,
top: 30,
fill: 'blue',
width: 250,
height: 250,
opacity: 1,
scaleX: 1,
scaleY: 1,
angle: 0,
rx: 10,
ry: 10,
strokeWidth: 0,
name: "Rounded Rectangle",
icon: "crop-square"
});
canvas.add(roundrect).setActiveObject(roundrect);
var customProperties = 'name icon'.split(' ');
function copy() {
canvas.getActiveObject().clone(function(cloned) {
console.log(cloned);
_clipboard = cloned;
}, customProperties);
}
function paste() {
// clone again, so you can do multiple copies.
_clipboard.clone(function(clonedObj) {
canvas.discardActiveObject();
clonedObj.set({
left: clonedObj.left + 10,
top: clonedObj.top + 10,
evented: true,
});
if (clonedObj.type === 'activeSelection') {
// active selection needs a reference to the canvas.
clonedObj.canvas = canvas;
clonedObj.forEachObject(function (obj) {
canvas.add(obj);
});
// this should solve the unselectability
clonedObj.setCoords();
} else {
canvas.add(clonedObj);
}
canvas.setActiveObject(clonedObj);
canvas.requestRenderAll();
console.log(clonedObj);
_clipboard = clonedObj;
},customProperties);
}
canvas {
border: blue dotted 2px;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<button onclick='copy()'>copy</button>
<button onclick='paste()'>paste</button><br>
<canvas id="c" width="400" height="400"></canvas>
object.clone accepts callback function and any additional property you want to include as another parameter. You can send your name and icon as properties to include.
And in paste you no need to clone that object if you are doing so, make sure there also send you are including your additional properties.
In the below code how can I use options array which is passed as a argument to drawOval
drawOval=function(options) {
$triangle = new Triangle({
// how can I use options array here
// the format it accept is top:450,
// left:500,width:200
});
};
opt = new Array(
top: 450,
left: 500,
width: 200,
height: 200,
fill: 'rgb(204,0,107)'
);
drawOval(opt);
Basically I need an object not array.
opt= {
top:100,
left:200,
width:200,
height:200,
fill:'rgb(12,0,107)'
}
drawOval(opt);