Is that possible with Raphael.FreeTransform to rotate an element, without scaling it?
When I initialize my element with scale: false, rotate: true I can only rotate it without scaling and that's OK. I wan't to achieve the same but when rotate start event occurs, ie. I want to change the scale dynamically from the callback function:
ft = paper.freeTransform(rect, {}, function(ft, events) {
if (events.indexOf("rotate start") !== -1) {
ft.setOpts({scale: false});
}
});
The element is initialized with the following properties:
ft.setOpts({
keepRatio: false,
draw: 'bbox',
snap: {
rotate: 45
},
keepRatio: ['axisX', 'axisY']
});
JSFiddle
I actually figured out how to do this. Just initialize FreeTransform with the following parameters:
ft.setOpts({
drag: ['center', 'self'],
rotate: ['axisY'],
scale: ['bboxCorners', 'bboxSides'],
keepRatio: ['bboxCorners'],
snap: {
rotate: 45
},
draw: 'bbox'
});
http://alias.io/raphael/free_transform/ helped a lot in figuring this out.
Related
I'm new to Highcharts - it seems you can only trigger drag events if the appropriate dragDrop events are defined and enabled on a series. E.g. https://api.highcharts.com/highcharts/plotOptions.series.dragDrop
How can I suppress the points actually being moved around in my chart? I have tried setting allowPointSelect: false and disabling both draggableX and draggableY but of course doing that don't fire any drag events. I have also tried event.preventDefault but no luck
What I'm basically looking for is to have a user drag over a range in a line/area chart from startX/Y to endX/Y and display the results to the user (which I can successfully get using mouseOver - a nice feature!)
For such a feature, you don't need to use draggable-points module. A simple custom solution with a crosshair and dynamically added/removed plot-lines will be enough. For example:
chart: {
animation: false,
events: {
load: function() {
const chart = this;
this.series[0].points.forEach(point => {
point.graphic.on('mousedown', function() {
chart.draggedPoint = point;
chart.xAxis[0].update({
plotLines: [{
width: 2,
color: 'grey',
dashStyle: 'ShortDash',
value: point.x
}]
});
});
});
document.body.addEventListener('mouseup', function() {
chart.draggedPoint = null;
chart.xAxis[0].update({
plotLines: []
});
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/rsuj93at/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
I'm using this function from Openlayers 3 cookbook:
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize());
}
This function works great but, the zoom is closer to the feature than I need and I would like to know if there is another way to do a zoom to the feature, but with one or two zoom levels less than this function does.
I assume it's possible to make another new variable called "extension" and add values to Houses1860b.getSource().getExtent() for doing the extension bigger than by default... I look for posts with this info but I didn't found none, Can you help me?
I will give an example by considering, 100px padding in all directions(top, right, bottom and left). Then I will have that feature in below way.
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize(), {
padding : [100, 100, 100, 100]
});
}
I'm using jQueryRotate to rotate my image.
Basically I want the image to start at 0 then rotate to -20 degrees then to 15 degrees then keep going back and forth between these 2 values and continue this infinitely.
So basically a little image shake, would this be possible with jQueryRotate or would you recommend another jquery plugin? Would need something with IE9 support.
Sorry forgot to post the code, but I was able to come up with a solution.
function() {
var rotation = function() {
$("#img1").rotate({
duration: 1000,
angle: 0,
animateTo: -15,
callback: function() {
$(this).rotate({
duration: 1000,
angle: -15,
animateTo: 0,
callback: function() {}
});
}
});
}
rotation();
I have instantiated a YUI and I need to scroll to the bottom right away (and also after adding some elements dinamically later). Any ideas how can I do that?
Here is the code so far:
yInstance = YUI();
yInstance.use('scrollview-base', function(Y) {
Y.scrollview = new Y.ScrollView({
id:"scrollview",
srcNode: '#scrollview-content',
height: main_scrollable_div_height,
flick: {
minDistance: 10,
minVelocity: 0.3,
axis: "y"
},
axis: "y"
});
Y.scrollview.render();
});
I can see in the official docs that there is a "scrollY" variable, but have no idea how to modify it (is it just read-only?)
Got it!
The solution is to add this when initializing "scrollY: max_height":
Y.scrollview = new Y.ScrollView({
id:"scrollview",
srcNode: '#scrollview-content',
height: main_scrollable_div_height,
flick: {
minDistance: 10,
minVelocity: 0.3,
axis: "y"
},
axis: "y",
scrollY: max_height
});
I can't seem to stop this spinner no matter what I try.
I have searched around for the way to do it but nothing I have tried works.
Fiddle:
http://jsfiddle.net/gmvT4/5/
Backup code:
var opts = {
lines: 13, // The number of lines to draw
length: 5, // The length of each line
width: 2, // The line thickness
radius: 5, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 58, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#fff', // #rgb or #rrggbb or array of colors
speed: 0.9, // Rounds per second
trail: 100, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('foo');
$(document).on('click', '#spin', function () {
var spinner = new Spinner(opts).spin(target);
});
$(document).on('click', '#stop', function () {
$("#foo").data('spinner').stop();
});
<div id="foo"></div>
<button id="spin">Spin!</button>
<button id="stop">Stop!</button>
Thanks for any help! Craig.
Uncaught TypeError: Cannot read property 'stop' of undefined
This error tells you something. You're trying to run .stop() on $("#foo").data('spinner'). Instead, use the instance created by spinner, which you'll need to first declare outside of the scope of that click event.
var spinner;
$(document).on('click','#spin',function(){
spinner = new Spinner(opts).spin(target);
});
$(document).on('click','#stop',function(){
spinner.stop();
});
Updated fiddle c/o René Roth