I've already looked at some other posts about that but still can't figure out why the formula isn't working.
To calculate the bounding box of a rotated rectangle :
w' = sin(a)*h + cos(a)*w;
h' = sin(a)*w + cos(a)*h;
The problem is that I'm getting weird behaviours where w' and h' are not precise at all.
// calculate rotation angle of shape
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if (matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
} else {
var angle = 0;
}
if (angle < 0) angle += 360;
return angle;
}
var shape = $('.shape'),
shapeLeft = shape.position().left,
shapeTop = shape.position().top,
shapeWidth = shape.width(),
shapeHeight = shape.height(),
angle = getRotationDegrees(shape),
// formula below
height = Math.abs(shapeWidth * Math.sin(angle)) + Math.abs(shapeHeight * Math.cos(angle)),
width = Math.abs(shapeHeight * Math.sin(angle)) + Math.abs(shapeWidth * Math.cos(angle));
$('#g1').css('width', width);
$('#g2').css('height', height);
.elements,
.element {
position: absolute
}
#s2 {
background: #333333;
top: 60px;
left: -25px;
width: 300px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layout" style="position:relative; margin-top:50px; margin-left:70px;">
<div class="elements">
<div id="g1" class="element" style="background:red;left:-35px;top:-10px;height:2px;"></div>
<div id="g2" class="element" style="background:red;left:-35px;top:-10px;width:2px;"></div>
<div id="s2" class="element shape" style="transform: rotate(8deg);"></div>
</div>
</div>
What am I doing wrong ?
Two sources of error:
(Minor) Rounding of the angle. (Don't know what you meant by "already a round number")
(Major) You use the result of getRotationDegrees directly in Math.cos / sin. These functions require radians, i.e. the result directly returned by Math.atan2.
The snippet below adds the other two edges of the bounding box, and also the correct positional offset. I added a slider to change the rotation angle, in order to illustrate that this code is robust.
function getMatrix(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
return (matrix == 'none') ? null : matrix.split('(')[1].split(')')[0].split(',');
}
// calculate rotation angle of shape
function getRotationRadians(matrix) {
var angle = matrix ? Math.atan2(matrix[1], matrix[0]) : 0;
if (angle < 0) angle += 2.0 * Math.PI;
return angle;
}
// calculate translation
function getTranslation(matrix) {
return matrix ? [matrix[4], matrix[5]] : [0, 0];
}
// calculate bounding box
function getBoundingBox(shape) {
var shapeLeft = shape.position().left,
shapeTop = shape.position().top,
shapeWidth = shape.width(),
shapeHeight = shape.height();
var matrix = getMatrix(shape);
var angle = getRotationRadians(matrix);
var height = Math.abs(shapeWidth * Math.sin(angle)) + Math.abs(shapeHeight * Math.cos(angle));
var width = Math.abs(shapeHeight * Math.sin(angle)) + Math.abs(shapeWidth * Math.cos(angle));
var trans = getTranslation(matrix);
var left = trans[0] - (width * 0.5);
var top = trans[1] - (height * 0.5);
return {'x': left, 'y': top, 'w': width, 'h': height};
}
formatBox($('.shape'));
function formatBox(shape) {
var box = getBoundingBox(shape);
var offx = 124, offy = 109;
var g1 = $('#g1'), g2 = $('#g2'), g3 = $('#g3'), g4 = $('#g4');
g1.css('width', box.w);
g2.css('height', box.h);
g3.css('width', box.w);
g4.css('height', box.h);
g1.css('left', offx + box.x);
g2.css('left', offx + box.x);
g3.css('left', offx + box.x);
g4.css('left', offx + box.x + box.w);
g1.css('top', offy + box.y);
g2.css('top', offy + box.y);
g3.css('top', offy + box.y + box.h);
g4.css('top', offy + box.y);
}
var angleInp = document.getElementById("angleInp");
angleInp.addEventListener("change", function() {
var shape = $('.shape');
shape.css('transform', 'rotate(' + angleInp.value + 'deg)');
formatBox(shape);
}, false);
.elements,
.element {
position: absolute
}
#s2 {
background: #333333;
top: 60px;
left: -25px;
width: 300px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
<input class="bar" type="range" id="angleInp" min="0" max="360" value="15" onchange="angleInp.value=value"/>
</div>
<div class="layout" style="position:relative; margin-top:50px; margin-left:70px;">
<div class="elements">
<div id="g1" class="element" style="background:red;left:0px;top:0px;height:2px;"></div>
<div id="g2" class="element" style="background:red;left:0px;top:0px;width:2px;"></div>
<div id="g3" class="element" style="background:red;left:0px;top:0px;height:2px;"></div>
<div id="g4" class="element" style="background:red;left:0px;top:0px;width:2px;"></div>
<div id="s2" class="element shape" style="transform: rotate(15deg);"></div>
</div>
</div>
Related
I am trying to rotate an image inside a container.
The container width must have a limit, and so should the height.
I was able to accomplish it with the following code, but there is an issue with one of the images.
When image 2 is rotated sideways, or 45 degrees, it jumps outside of the borders.
It works fine for the other images.
What am I doing wrong?
var degrees = 0;
function x () {
var setRotator = (function () {
var setRotation,
setScale,
offsetAngle,
originalHeight,
originalFactor;
setRotation = function (degrees, scale, element) {
element.style.webkitTransform = 'rotate(' + degrees + 'deg) scale(' + scale + ')';
element.style.transform = 'rotate(' + degrees + 'deg) scale(' + scale + ')';
};
getScale = function (degrees) {
var radians = degrees * Math.PI / 180,
sum;
if (degrees < 90) {
sum = radians - offsetAngle;
} else if (degrees < 180) {
sum = radians + offsetAngle;
} else if (degrees < 270) {
sum = radians - offsetAngle;
} else {
sum = radians + offsetAngle;
}
return (originalHeight / Math.cos(sum)) / originalFactor;
};
return function (inner) {
offsetAngle = Math.atan(inner.offsetWidth / inner.offsetHeight);
originalHeight = inner.offsetHeight;
originalFactor = Math.sqrt(Math.pow(inner.offsetHeight, 2) + Math.pow(inner.offsetWidth, 2));
return {
rotate: function (degrees) {
setRotation (degrees, getScale(degrees), inner);
}
}
};
}());
var //outer = document.getElementById('outer'),
inner = document.getElementById('testImg'),
rotator = setRotator(testImg);
degrees += 45;
if (degrees >= 360) {
degrees = 0;
}
rotator.rotate(degrees);
}
$('#btn1').click(function(){
x()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/smile.svg'>Img1</button>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/juanmontoya_lingerie.svg'>Img2</button>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/php.svg'>Img3</button>
<button type="button" id="btn1" >Rotate Div</button>
<DIV id="container" style=" width:60%;">
<DIV id="outer" width="100%" style=" position: relative;border-style:dotted;">
<img id ="testImg" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/smile.svg" style="width:100%;height:100%;border-style:dotted;border-color:red;">
</DIV>
</DIV>
You'll need to position the image absolutely within the div and edit the scale so that it's positive and never greater than 1. I have a working version here: https://jsfiddle.net/e9h30w1z/
I've added this CSS
img {
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
position: absolute;
object-fit: contain;
left: 50%;
transform: translate(-50%);
}
#outer {
height: 0;
padding-bottom: 100%;
}
I edited the CSS rule being added within the setRotation method to include translate(-50%) (this is part of the image positioning)
And I changed the return statement of the getScale method to the following:
scale = (originalHeight / Math.cos(sum)) / originalFactor;
return (Math.abs(scale) > 1) ? 1 : Math.abs(scale);
As a note, negative scale flips the image which is why one of my attempts started skipping positions.
I am trying to create a function for my game of pong for the ball to move around within a frame. When I call the function I am using a function called setStyle() to change the position of the ball every 100 milliseconds.
After I saw that it did not work I console logged the left and top positions to find that the function was getting called but the amount of pixels it was located at was the same.
//Javascript
function ballMove(){
var x = 5;
var y = 5;
var maxHeight = getStyle('frame', 'top') + getStyle('frame', 'height');
var maxWidth = getStyle('frame', 'left') + getStyle('frame', 'width');
var ballLeft = getStyle('ball', 'left');
var ballTop = getStyle('ball', 'top');
var minLeft = getStyle('frame', 'left');
var minTop = getStyle('frame', 'top');
if(ballTop >= minTop){
setStyle('ball', 'top', (ballTop + y) + "px");
}
else if(ballTop <= maxHeight){
setStyle('ball', 'top', (ballTop - y) + "px");
}
if(ballLeft >= minLeft){
setStyle('ball', 'left', (ballLeft + x) + "px");
}
else if(ballLeft <= maxWidth){
setStyle('ball', 'left', (ballLeft - x) + "px");
}
console.log(ballLeft);
console.log(ballTop);
}
function startIntervals(){
setInterval(ballMove, 100);
console.log("starting...");
}
Here is my css
#ball{
position: relative;
background-color: white;
height: 10px;
width: 10px;
left: 50px;
}
and the html
<body onload="startIntervals();">
<div id="main-div">
<div id="title">Pong</div>
<div id="frame">
<div id="paddlewasd">
</div>
<div id="paddlearrow">
</div>
<div id="ball">
</div>
</div>
</div>
I expected the ball to move but instead the function gets called and the left and top positions stay the same.My code
Although it depends fairly significantly on the rest of the code that wasn't posted the following implementations of getStyle and setStyle along with a css defintion of #frame allows the ball to move diagonally 5pixels right and down every 100 milliseconds
function getStyle(id, style) {
var element = document.getElementById(id);
var computedStyle = window.getComputedStyle(element);
var selectedStyle = computedStyle[style];
// Check if the style value matches a 'pixel' string format, if it does extract the numeric part and parse it as an integer
var pixelTokens = /([\d]*)px$/.exec(selectedStyle);
if (pixelTokens) {
return parseInt(pixelTokens[1]);
}
return selectedStyle;
}
function setStyle(id, style, value) {
var element = document.getElementById(id);
return element.style[style] = value;
}
function ballMove() {
var x = 5;
var y = 5;
var maxHeight = getStyle('frame', 'top') + getStyle('frame', 'height');
var maxWidth = getStyle('frame', 'left') + getStyle('frame', 'width');
var ballLeft = getStyle('ball', 'left');
var ballTop = getStyle('ball', 'top');
var minLeft = getStyle('frame', 'left');
var minTop = getStyle('frame', 'top');
if (ballTop >= minTop) {
setStyle('ball', 'top', (ballTop + y) + "px");
} else if (ballTop <= maxHeight) {
setStyle('ball', 'top', (ballTop - y) + "px");
}
if (ballLeft >= minLeft) {
setStyle('ball', 'left', (ballLeft + x) + "px");
} else if (ballLeft <= maxWidth) {
setStyle('ball', 'left', (ballLeft - x) + "px");
}
console.log(ballLeft);
console.log(ballTop);
}
function startIntervals() {
setInterval(ballMove, 100);
console.log("starting...");
}
#ball {
position: relative;
background-color: white;
height: 10px;
width: 10px;
left: 50px;
}
#frame {
width: 300px;
height: 300px;
top: 0px;
left: 0px;
background-color: green;
}
<body onload="startIntervals();">
<div id="main-div">
<div id="title">Pong</div>
<div id="frame">
<div id="paddlewasd">
</div>
<div id="paddlearrow">
</div>
<div id="ball">
</div>
</div>
</div>
</body>
I'm trying to figure out how to reproduce the behavior of the "border-radius" css property into an HTML canvas.
So i've already done something in Javascript in order to compute the correct borders of a given shape, using a specific radius (for each corner).
Here is the previous question if needed : Gecko - CSS layout border radius - Javascript conversion
I've managed to get close from the browser adaptation but there's still an issue, and it seems that it's the last, and the hard part!
Let's take an example in order to explain you the problem
Take a shape of 100px width & 100px height. Now apply the following radius to each corner :
Top left : 37px
Top right : 100px
Bottom right : 1px
Bottom left : 100px
So the css style for this will be border-radius : 37px 100px 1px 100px
Now let's consider using the code below in order to draw this shape in a canvas.
By using the function correctRadius(r, w, h) in order to avoid bad shapes, each corners will be computed like that :
=> {tl: 18.5, tr: 81.5, br: 0.5, bl: 81.5}
Here is a visual of this :
You will be able to test it in the following snippet
As you can see, the browser shape (green) is overlapped with the canvas shape (brown + 'pink' due to opacity). I've put some opacity on it in order to check the bad corners (pink).
The brown shape do not fit properly into the green shape, the top left corner is getting out of the base, and the bottom left and top right corners don't fit the green shape.
I've already tried to fix that but with no success, and also looked the sources of the Gecko layout engine (https://github.com/mozilla/gecko-dev) in this file : layout/painting/nsCSSRenderingBorders.cpp, but haven't found anything + i have no skills in C++
If anyone could help me to figure this out, or give me some advice, i'll be able to fix this and get the borders working
// Ctx
var ctx = document.getElementById("rounded-rect").getContext("2d");
ctx.translate(0, 0);
function correctRadius(r, w, h) {
var tl = r.tl;
var tr = r.tr;
var br = r.br;
var bl = r.bl;
r.tl -= Math.max(Math.max((tl + tr - w) / 2, 0),
Math.max((tl + bl - h) / 2, 0));
r.tr -= Math.max(Math.max((tr + tl - w) / 2, 0),
Math.max((tr + br - h) / 2, 0));
r.br -= Math.max(Math.max((br + bl - w) / 2, 0),
Math.max((br + tr - h) / 2, 0));
r.bl -= Math.max(Math.max((bl + br - w) / 2, 0),
Math.max((bl + tl - h) / 2, 0));
}
//Round rect func
ctx.constructor.prototype.fillRoundedRect =
function(xx, yy, ww, hh, rad, fill, stroke) {
correctRadius(rad, ww, hh);
if (typeof(rad) === "undefined") rad = 5;
this.beginPath();
this.moveTo(xx, yy);
this.arcTo(xx + ww, yy, xx + ww, yy + hh, rad.tr);
this.arcTo(xx + ww, yy + hh, xx, yy + hh, rad.br);
this.arcTo(xx, yy + hh, xx, yy, rad.bl);
this.arcTo(xx, yy, xx + ww, yy, rad.tl);
if (stroke) this.stroke(); // Default to no stroke
if (fill || typeof(fill) === "undefined") this.fill(); // Default to fill
};
ctx.fillStyle = "red";
ctx.strokeStyle = "#ddf";
var copy = document.getElementById('copy');
var tl = document.getElementById('tl');
var tr = document.getElementById('tr');
var bl = document.getElementById('bl');
var br = document.getElementById('br');
var last = [];
setInterval(function() {
/* 1.Top left */
/* 2. Top right */
/* 3. Bottom right */
/* 4. Bottom left */
var bordersCSSProps = [
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius"
],
elementBorders = [],
elementStyle = getComputedStyle(copy);
var changed = false;
for (var i = 0; i < 4; ++i) {
elementBorders[i] = elementStyle.getPropertyValue(bordersCSSProps[i]);
if (elementBorders[i] !== last[i]) {
changed = true;
last[i] = elementBorders[i];
}
}
if (changed) {
var borders = [].concat(elementBorders).map(function(a) {
return parseInt(a)
});
var rad = {
tl: borders[0],
tr: borders[1],
br: borders[2],
bl: borders[3]
};
ctx.clearRect(0, 0, 600, 500);
ctx.fillRoundedRect(120, 120, 100, 100, rad);
}
}, 1E3 / 60);
function elemBordersSet() {
var borders = [tl.value, tr.value, br.value, bl.value].join('px ') + 'px';
copy.style.borderRadius = borders;
}
tl.oninput = elemBordersSet;
tr.oninput = elemBordersSet;
bl.oninput = elemBordersSet;
br.oninput = elemBordersSet;
html,
body {
margin: 0;
padding: 0;
}
<div style="display:inline-block; position: absolute;
left:120px;top:120px; width: 100px; height: 100px; background:green;
border-radius: 100px 49px 1px 1px;" id="copy">
</div>
<canvas style="opacity:0.5; z-index:1; display: inline-block; position: absolute; left:0; top:0;" id="rounded-rect" width="600" height="500">
</canvas>
<div style="margin-top:250px; position:absolute; z-index:5">
<label>
Top left
<input type="range" min="1" max="100" value="0" class="slider" id="tl"></label><br/>
<label>
Top right
<input type="range" min="1" max="100" value="0" class="slider" id="tr"></label><br/>
<label>
Bottom left
<input type="range" min="1" max="100" value="0" class="slider" id="bl"></label><br/>
<label>
Bottom right
<input type="range" min="1" max="100" value="0" class="slider" id="br"></label><br/>
</div>
Found the solution !
We just need to compute a scaleRatio :
First, we get the maxRadiusWidth (r.tl + r.tr, r.bl + r.br) & maxRadiusHeight (r.tl + r.bl, r.tr + r.br)
and then a widthRatio = (w / maxRadiusWidth) & heightRatio = (h / maxRadiusHeight) with the size of the shape (WIDTH & HEIGHT)
Then we take the lower of theses two variables : Math.min(Math.min(widthRatio, heightRatio), 1) in order to not get out of the shape & we make sure that
the ratio is below 1.
Finally, we simply need to multiply each corner by this ratio in order to get the correct size !
r.tl = tl*scaleRatio;
r.tr = tr*scaleRatio;
r.br = br*scaleRatio;
r.bl = bl*scaleRatio;
See snippet below ;)
// Ctx
var ctx = document.getElementById("rounded-rect").getContext("2d");
ctx.translate(0, 0);
function correctRadius(r, w, h) {
var
maxRadiusWidth = Math.max(r.tl + r.tr, r.bl + r.br),
maxRadiusHeight = Math.max(r.tl + r.bl, r.tr + r.br),
widthRatio = w / maxRadiusWidth,
heightRatio = h / maxRadiusHeight,
scaleRatio = Math.min(Math.min(widthRatio, heightRatio), 1);
for (var k in r)
r[k] = r[k] * scaleRatio;
}
//Round rect func
ctx.constructor.prototype.fillRoundedRect =
function(xx, yy, ww, hh, rad, fill, stroke) {
correctRadius(rad, ww, hh);
if (typeof(rad) === "undefined") rad = 5;
this.beginPath();
this.moveTo(xx, yy);
this.arcTo(xx + ww, yy, xx + ww, yy + hh, rad.tr);
this.arcTo(xx + ww, yy + hh, xx, yy + hh, rad.br);
this.arcTo(xx, yy + hh, xx, yy, rad.bl);
this.arcTo(xx, yy, xx + ww, yy, rad.tl);
if (stroke) this.stroke(); // Default to no stroke
if (fill || typeof(fill) === "undefined") this.fill(); // Default to fill
};
ctx.fillStyle = "red";
ctx.strokeStyle = "#ddf";
var copy = document.getElementById('copy');
var tl = document.getElementById('tl');
var tr = document.getElementById('tr');
var bl = document.getElementById('bl');
var br = document.getElementById('br');
var last = [];
setInterval(function() {
/* 1.Top left */
/* 2. Top right */
/* 3. Bottom right */
/* 4. Bottom left */
var bordersCSSProps = [
"border-top-left-radius",
"border-top-right-radius",
"border-bottom-right-radius",
"border-bottom-left-radius"
],
elementBorders = [],
elementStyle = getComputedStyle(copy);
var changed = false;
for (var i = 0; i < 4; ++i) {
elementBorders[i] = elementStyle.getPropertyValue(bordersCSSProps[i]);
if (elementBorders[i] !== last[i]) {
changed = true;
last[i] = elementBorders[i];
}
}
if (changed) {
var borders = [].concat(elementBorders).map(function(a) {
return parseInt(a)
});
var rad = {
tl: borders[0],
tr: borders[1],
br: borders[2],
bl: borders[3]
};
ctx.clearRect(0, 0, 600, 500);
ctx.fillRoundedRect(120, 120, 100, 200, rad);
}
}, 1E3 / 60);
function elemBordersSet() {
var borders = [tl.value, tr.value, br.value, bl.value].join('px ') + 'px';
copy.style.borderRadius = borders;
}
tl.oninput = elemBordersSet;
tr.oninput = elemBordersSet;
bl.oninput = elemBordersSet;
br.oninput = elemBordersSet;
<div style="display:inline-block; position: absolute;
left:120px;top:120px; width: 100px; height: 200px; background:green;
border-radius: 33px 71px 40px 100px;" id="copy">
</div>
<canvas style="z-index: 1;opacity:0.4;display: inline-block; position: absolute; left:0; top:0;" id="rounded-rect"
width="600"
height="500">
</canvas>
<div style="position: absolute; z-index: 5;margin-top: 330px;">
<label>
Top left
<input type="range" min="1" max="500" value="0" class="slider" id="tl"></label><br/>
<label>
Top right
<input type="range" min="1" max="500" value="0" class="slider" id="tr"></label><br/>
<label>
Bottom left
<input type="range" min="1" max="500" value="0" class="slider" id="bl"></label><br/>
<label>
Bottom right
<input type="range" min="1" max="500" value="0" class="slider" id="br"></label><br/>
</div>
I am trying to produce a movement on a circle of some rectangular divs. I want that if a div is dragged near another div, the second div move within the first one the user is dragging. Is there a plugin that do this or I need to produce something calculating the position of 2 divs. And, the rectangular divs can be also 10 divs not only 2.
Here my solution.
<html>
<head>
<style type="text/css">
div#dynamic-container{width:400px; height:400px; background-color: lightgoldenrodyellow; position:relative; border: 1px solid black;}
div#innerCircle{width: 380px; height: 380px; position: absolute; left: 10px; top:10px; background-color: lightcoral;
border-radius:190px; -moz-border-radius: 190px; -webkit-border-radius: 190px;}
div.marker{width: 20px; height:20px; background: black; position:absolute; left:195px; cursor: pointer;
-moz-transform:rotate(45deg);
-moz-transform-origin:5px 200px;
transform:rotate(45deg);
transform-origin:5px 200px;
-ms-transform:rotate(45deg);
-ms-transform-origin:5px 200px;
-webkit-transform:rotate(45deg);
-webkit-transform-origin:5px 200px;
z-index:17;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/lib/jquery.overlaps.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper){
//alert(offsetSelector.left);
var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
var theta = Math.atan2(y,x)*(180/Math.PI);
var cssDegs = convertThetaToCssDegs(theta);
var rotate = 'rotate(' +cssDegs + 'deg)';
cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
}
function convertThetaToCssDegs(theta){
var cssDegs = 90 - theta;
return cssDegs;
}
$(document).ready(function(){
//$('.marker-1').draggable();
var items = $('#dynamic-container').find('.marker');
var i = 0;
var cssDegs = 15;
var rotate = 'rotate(' +cssDegs + 'deg)';
for (i; i<items.length; i++){
if(i == 0){
cssDegs = cssDegs*i;
}else{
cssDegs = cssDegs+20;
}
console.log("cssDegs: "+cssDegs);
rotate = 'rotate(' +cssDegs + 'deg)';
//Imposto i gradi a tutti i punti per differenziarli al document ready
$(items[i]).css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
//items[i].css("background-color","blue");
}
console.log(items);
$('.marker').on('mousedown', function(){
$('body').on('mousemove', function(event){
//rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('.marker'));
//rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $(event.target));
rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $(this).find('.marker-1'));
var markers = $(this).find('.marker');
var over = overlap(markers[0],$('#container'));
if(markers[0] != over){
console.log($(markers[0]));
console.log(over);
}else{
console.log('not over');
}
});
});
$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
});
function overlap (div1, div2){
var res = $(div1).overlaps($(div2));
return res;
}
</script>
</head>
<body>
<div id="container">
<div id ="dynamic-container">
<div class ="marker marker-1"></div>
<div class ="marker marker-2"></div>
<div id ="innerCircle"></div>
</div>
</div>
</body>
At the moment this snippet produce a circle with 2 divs. That can move on the circle border. I want that if the div the user drag a div when the dragged div touch the other, they move together.
I tried to use also jQuery Overlaps library to get if 2 divs are overlapped but I do something wrong.
Thanks in advance. Every library you can suggest are well accepted
EDIT:
A more complete example will be your example working:
Working JSFiddle:
https://jsfiddle.net/mcbo9bs3/
function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper){
//alert(offsetSelector.left);
var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
var theta = Math.atan2(y,x)*(180/Math.PI);
var cssDegs = convertThetaToCssDegs(theta);
var rotate = 'rotate(' +cssDegs + 'deg)';
cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
}
function convertThetaToCssDegs(theta){
var cssDegs = 90 - theta;
return cssDegs;
}
$(document).ready(function(){
//$('.marker-1').draggable();
var items = $('#dynamic-container').find('.marker');
var i = 0;
var cssDegs = 15;
var rotate = 'rotate(' +cssDegs + 'deg)';
for (i; i<items.length; i++){
if(i == 0){
cssDegs = cssDegs*i;
}else{
cssDegs = cssDegs+20;
}
console.log("cssDegs: "+cssDegs);
rotate = 'rotate(' +cssDegs + 'deg)';
//Imposto i gradi a tutti i punti per differenziarli al document ready
$(items[i]).css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
//items[i].css("background-color","blue");
}
console.log(items);
$('.marker').on('mousedown', function(){
$('body').on('mousemove', function(event){
//rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('.marker'));
//rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $(event.target));
rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $(this).find('.marker-1'));
var markers = $(this).find('.marker');
});
});
$('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
});
window.setInterval(function() {
$('#result').text(collision($('.marker-1'), $('.marker-2')));
}, 200);
function collision($div1, $div2) {
var x1 = $($div1).offset().left;
var y1 = $($div1).offset().top;
var h1 = $($div1).outerHeight(true);
var w1 = $($div1).outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $($div2).offset().left;
var y2 = $($div2).offset().top;
var h2 = $($div2).outerHeight(true);
var w2 = $($div2).outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
return true;
}
To detect overlapping this code should work:
function collision($div1, $div2) {
var x1 = $($div1).offset().left;
var y1 = $($div1).offset().top;
var h1 = $($div1).outerHeight(true);
var w1 = $($div1).outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $($div2).offset().left;
var y2 = $($div2).offset().top;
var h2 = $($div2).outerHeight(true);
var w2 = $($div2).outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
return true;
}
You can apply that to your code (replacing the overlap function).
Hope it helps!
i am working on an application which require Zoom In, Zoom out and Panning. I have achieved all these functionality using viewBox property of svg.
My current Zoom In works fine but it zoom toward the center of screen. I want to add additional functionality of Zoom in toward a selected element. I know i can set viewBox to the selected element bbox values, but i want sequential/smooth zoom in which does not conflict with my current/default zoom in.
how i can achieve this?
here is jsfiddle for the sample code:-
http://jsfiddle.net/55G9c/
HTML Code
<div onclick="zoomin()" style="display: block;float: left;border: 1px solid;cursor: pointer">
ZoomIn
</div>
<div onclick="zoomout()" style="display: block;float: left;border: 1px solid;cursor: pointer;margin-left: 10px">
ZoomOut
</div>
<svg id="mainsvg" width="600px" height="500px" viewBox="0 0 600 500">
<g id="gnode">
<rect id="boundry" x="0" y="0" width="599" height="499" fill="none" stroke='black'/>
<circle id="centernode" cx="300" cy="250" r="5" fill="red" stroke="none" />
<rect id="selected" x="450" y="100" width="50" height="50" fill="blue" stroke='none'/>
</g>
</svg>
Javascript Code
var svg=document.getElementById('mainsvg');
var gnode=document.getElementById('gnode');
var zoomPercentage=0.25;
var MAXIMUM_ZOOM_HEIGHT = 1400;
var baseBox={};
var level=0;
var widthRatio,heightRatio;
var clientheight = document.documentElement.clientHeight;
var clientwidth = document.documentElement.clientWidth;
function setup(){
var
baseX,
baseY,
baseWidth,
baseHeight,
percentageDifference,
heightDifference;
svg.setAttribute('height', clientheight);
svg.setAttribute('width', clientwidth);
var boundry=document.getElementById('boundry');
boundry.setAttribute('height', clientheight-1);
boundry.setAttribute('width', clientwidth-1);
var centernode=document.getElementById('centernode');
centernode.setAttribute('cy', clientheight/2);
centernode.setAttribute('cx', clientwidth/2);
if (svg.height.baseVal.value >= MAXIMUM_ZOOM_HEIGHT)
baseHeight = MAXIMUM_ZOOM_HEIGHT;
else
baseHeight = Math.round(gnode.getBBox().height) + 60;
baseY = (svg.height.baseVal.value - baseHeight) / 2;
percentageDifference = baseHeight / svg.height.baseVal.value;
baseWidth = percentageDifference * svg.width.baseVal.value;
baseX = (svg.width.baseVal.value - baseWidth) / 2;
baseBox.x = baseX;
baseBox.y = baseY;
baseBox.width = baseWidth;
baseBox.height = baseHeight;
level = 0;
heightDifference = MAXIMUM_ZOOM_HEIGHT - baseHeight;
zoomPercentage = (heightDifference / 10) / heightDifference;
setViewBox(baseBox);
}
function setViewBox(viewBox) {
svg.viewBox.baseVal.x = Math.round(viewBox.x);
svg.viewBox.baseVal.y = Math.round(viewBox.y);
svg.viewBox.baseVal.width = Math.round(viewBox.width);
svg.viewBox.baseVal.height = Math.round(viewBox.height);
setRatios();
}
function setRatios () {
widthRatio = svg.viewBox.baseVal.width / svg.width.baseVal.value;
heightRatio = svg.viewBox.baseVal.height / svg.height.baseVal.value;
}
function calculateViewBox(level) {
var
height = baseBox.height - (zoomPercentage * level * baseBox.height),
y = baseBox.y + (baseBox.height - height) / 2,
width = baseBox.width - (zoomPercentage * level * baseBox.width),
x = baseBox.x + (baseBox.width - width) / 2,
viewBox = {
x: x,
y: y,
width: width,
height: height
}
return viewBox;
}
function zoomin(){
level++;
if(level>5)
level=5;
var
x,
y,
paperViewBox = svg.viewBox.baseVal,
previousViewBox = calculateViewBox(level - 1),
newViewBox = calculateViewBox(level);
//callback = this.afterZoom;
if (Math.round(paperViewBox.x) > Math.round(newViewBox.x))
/**
* is panned left
*/
x = paperViewBox.x - (previousViewBox.width - newViewBox.width) / 2;
else if (Math.round(paperViewBox.x) < Math.round(previousViewBox.x) - (Math.round(newViewBox.x) - Math.round(previousViewBox.x)))
/**
* is panned right
*/
x = paperViewBox.x + (previousViewBox.width - newViewBox.width) + (previousViewBox.width - newViewBox.width) / 2;
else
x = newViewBox.x;
if (Math.round(paperViewBox.y) > Math.round(newViewBox.y))
/**
* is panned up
*/
y = paperViewBox.y - (previousViewBox.height - newViewBox.height) / 2;
else if (Math.round(paperViewBox.y) < Math.round(previousViewBox.y) - (Math.round(newViewBox.y) - Math.round(previousViewBox.y)))
/**
* is panned down
*/
y = paperViewBox.y + (previousViewBox.height - newViewBox.height) + (previousViewBox.height - newViewBox.height) / 2;
else
y = newViewBox.y;
var data = {
viewBox: {
x: x,
y: y,
width: newViewBox.width,
height: newViewBox.height
}
}
SetZoomViewBox(data);
}
function SetZoomViewBox(data){
var viewBox = data.viewBox;
svg.viewBox.baseVal.x = Math.round(viewBox.x);
svg.viewBox.baseVal.y = Math.round(viewBox.y);
svg.viewBox.baseVal.width = Math.round(viewBox.width);
svg.viewBox.baseVal.height = Math.round(viewBox.height);
setRatios();
}
function zoomout(){
level--;
if(level<0)
level=0;
var
x,
y,
paperViewBox = svg.viewBox.baseVal,
previousViewBox = calculateViewBox(level + 1),
newViewBox = calculateViewBox(level);
if (Math.round(paperViewBox.x) > Math.round(previousViewBox.x) + (Math.round(previousViewBox.x) - Math.round(newViewBox.x)))
/**
* is panned left
*/
x = paperViewBox.x - (newViewBox.width - previousViewBox.width);
else if (Math.round(paperViewBox.x) < Math.round(previousViewBox.x))
/**
* is panned right
*/
x = paperViewBox.x;
else
x = newViewBox.x;
if (Math.round(paperViewBox.y) > Math.round(previousViewBox.y) + (Math.round(previousViewBox.y) - Math.round(newViewBox.y)))
/**
* is panned up
*/
y = paperViewBox.y - (newViewBox.height - previousViewBox.height);
else if (Math.round(paperViewBox.y) < Math.round(previousViewBox.y))
/**
* is panned down
*/
y = paperViewBox.y;
else
y = newViewBox.y;
var data = {
viewBox: {
x: x,
y: y,
width: newViewBox.width,
height: newViewBox.height
}
}
SetZoomViewBox(data);
}
setup();
Here's an example that shows an SVG file with a zoom/pan control.
It sets the currentScale and currentTranslate attributes on the SVG root element to perform zooming/panning.
try running on firefox. click the center green circle to zoom out and red circle to zoom in. Probably you'll get some idea.