if (action == "mousedown") {
startx = x;
starty = y;
}
if (action == "mousemove") {
if (!mouseisdown) {
return;
} else {
//console.log(target);
var transformX = x - startx;
var transformY = y - starty;
// console.log(x, y, startx, starty);
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
}
if (action == "mouseup") {
var transformX = x - startx;
var transformY = y - starty;
// console.log(x, y, startx, starty);
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
Below is my way to get x, y position:
$("svg").on("mousedown", function (event) {
mouseisdown = true;
var offset = $("#center").offset(); //#center is the canvas
var x = event.pageX - offset.left;
var y = event.pageY - offset.top;
current_tool("mousedown", x, y, null);
});
Above is part of my code, my problem is this function works well on the first move, but when I tried to move it second time, the element object will suddenly back to its origin location before this first move, How to fix that problem?
Any help is appreciated.
if (action == "mousedown") {
startx = x - test.transform.animVal["0"].matrix.e; //change
starty = y - test.transform.animVal["0"].matrix.f; // change2
}
if (action == "mousemove") {
if (!mouseisdown) {
return;
} else {
if (test.transform.animVal["0"]) {
console.log(test.transform.animVal["0"].matrix);
var transformX = x - startx;
var transformY = y - starty;
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
}
}
if (action == "mouseup") {
var transformX = x - startx;
var transformY = y - starty;
// console.log(x, y, startx, starty);
var transformAttr = 'translate(' + transformX + ',' + transformY + ')';
test.setAttribute('transform', transformAttr);
}
Problem solved by myself, the reason of the problem is that, when I tries the second move, the start position did not take the first transform into consider, so after the change the code in "mousedown" handler, the problem settled.
Related
I'm having trouble to get the correct position to items added to the graph after moving items to a new area on the left side of the paper.
Function called when the item is drop on the canvas.
function drop(ev) {
ev.preventDefault();
// CANVAS ELEMENT DROP
var data = ev.dataTransfer.getData("text");
console.log('ev.pageX: ' + ev.pageX);
console.log('$(paper-container).offset().left: ' + $('#paper-container').offset().left);
console.log('$(.joint-paper).position().left: ' + $('.joint-paper').position().left);
console.log('ev.pageY: ' + ev.pageY);
console.log('$(paper-container).offset().top: ' + $('#paper-container').offset().top);
console.log('$(.joint-paper).position().top: ' + $('.joint-paper').position().top);
var x = ev.pageX - $('#paper-container').offset().left - $('.joint-paper').position().left;
var y = ev.pageY - $('#paper-container').offset().top - $('.joint-paper').position().top;
addCanvasItem(x, y);
}
Then adding item to the canvas:
function addCanvasItem(x, y) {
//x and y are in the screen referential
var zoomRatio = vm.paperScroller.zoom();
var scrollX = vm.paperScroller.el.scrollLeft;
var scrollY = vm.paperScroller.el.scrollTop;
var posX = x / zoomRatio + scrollX / zoomRatio - 50;
var posY = y / zoomRatio + scrollY / zoomRatio - 30;
item.attributes.position = { x: posX, y: posY };
item.addTo(vm.graph);
var cellView = item.findView(vm.paper);
rappidJsConfig.resetSelection([cellView.model]);
vm.selectedView = cellView;
vm.initEditor();
if (vm.isVisibleType('qad.Question')) {
var selectedQuestion = document.getElementById("selected-question");
if (selectedQuestion) {
selectedQuestion.focus();
}
}
};
Any ideas ?
I use Image Zoom from w3schools, code as follows:
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
img.parentElement.insertBefore(lens, img);
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
result.style.display = "none";
function moveLens(e) {
var pos, x, y;
e.preventDefault();
pos = getCursorPos(e);
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
lens.style.left = x + "px";
lens.style.top = y + "px";
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
a = img.getBoundingClientRect();
x = e.pageX - a.left;
y = e.pageY - a.top;
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
imageZoom("myimage", "myresult");
And I use the following simple code to switch images:
function change_img(img_src) {
document.getElementsByName("goods_img")[0].src=img_src;
}
My url: https://cn.angelcorp.net/shop/goods.php?id=9
You may click the thumbnail image with flag, but the zoom still show original image without flag.
Thank you.
You've got to change the background of myresult to the img_src as well.
Change the function to this
function change_img(img_src) {
document.getElementsByName("goods_img")[0].src=img_src;
document.getElementById("myresult").style = `background-image: url("${img_src}"); background-size: 468.846px 468.846px; display: none; background-position: -256.846px -256.846px;`;
}
I've made a rotating menu.
To select an item you rotate the menu by clicking and dragging.
http://codepen.io/PaulBunker/pen/ZGgxvY
var dragging = false;
var links = $('.menu a');
var radius = 520;
var degree = 0.262;
var angle = 0.79;
var orgX;
var orgY;
var offset = $('.menu').offset();
var newangle;
var origradians;
function setItems(angle) {
var internalangle = angle;
links.each(function() {
var y = Math.round(radius * Math.cos(internalangle));
var x = Math.round(radius * Math.sin(internalangle));
$(this).css({
left: x + 'px',
top: 0-y + 'px',
display:'block',
});
$(this).addClass(y);
if (y < 10 & x > 0) {
$(this).addClass('active');
}
if ( y < -10 || y > 0) {
$(this).removeClass('active');
}
internalangle += degree;
});
}
$(function() {
$(document).mousedown(function(evt) {
orgX = evt.pageX - offset.left;
orgY = evt.pageY - offset.top;
orgradians = Math.atan2(orgX, orgY);
dragging = true;
});
$(document).mouseup(function() {
dragging = false;
angle = newangle;
});
$(document).mousemove(function(evt) {
if (dragging) {
var x = evt.pageX - offset.left;
var y = evt.pageY - offset.top;
var radians = Math.atan2(y, x);
newangle = (orgradians + radians) - angle;
console.log (orgradians , radians, angle, newangle);
setItems(newangle);
console.log(newangle);
}
});
setItems(angle);
});
My problem is after the first drag to select an item.
At the beginning of the second drag the menu jumps into the wrong position.
on 'mouseup' I save the 'newangle' variable and override the 'angle variable'.
I suspect there is an error somewhere in the line
newangle = (orgradians + radians) - angle;
I've been tearing my hair out to try and get this to work!
Thanks in advance for any guidance!
-Paul
If you don't use trigonometry on mouse move and just use it once when the radius of the circle is defined it'll fix the issue:
Work out the rotation speed based on the radius of the circle:
var rotationSpeed = Math.atan(1/radius);
Use the rotation speed and the difference in the Y position of the cursor on mouse move:
var newangle = lastangle - (difY*rotationSpeed);
http://codepen.io/stevenarcher/pen/yNmRyP
var dragging = false;
var links = $('.menu a');
var radius = 520;
var degree = 0.262;
var lastY;
var offset = $('.menu').offset();
var lastangle = 0;
var rotationSpeed = Math.atan(1/radius);
function setItems(internalangle) {
links.each(function() {
var y = Math.round(radius * Math.cos(internalangle));
var x = Math.round(radius * Math.sin(internalangle));
$(this).css({
left: x + 'px',
top: 0 - y + 'px',
display:'block',
});
$(this).addClass(y);
if (y < 10) {
$(this).addClass('active');
}
if ( y < -10 || y > 0) {
$(this).removeClass('active');
}
internalangle += degree;
});
}
$(document).mousedown(function(evt) {
lastY = evt.pageY - offset.top;
dragging = true;
});
$(document).mouseup(function(evt) {
dragging = false;
});
$(document).mousemove(function(evt) {
if (dragging) {
var y = evt.pageY - offset.top;
var difY = lastY - y;
lastY = y;
var newangle = lastangle - (difY*rotationSpeed);
setItems(newangle);
lastangle = newangle;
}
});
setItems(0);
In my code I am resizing the Konva canvas and the konvajs-content elements to maintain a full screen appearance.
resizeCanvas()
window.onresize = function() { resizeCanvas(); }
function resizeCanvas() {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight || e.clientHeight || g.clientHeight;
var ratio = x / y;
var should = 1920 / 1080;
var cv = document.getElementsByTagName("canvas")[0];
var cc = document.getElementsByClassName("konvajs-content")[0];
var cx, cy;
var cleft=0;
if(ratio > should) {
cx = (y * 1920/1080);
cy = y;
cleft = (x - cx) / 2;
} else {
cx = x;
cy = (x * 1080/1920);
cv.setAttribute("style", "width:" + x + "px;height:"+ (x*1080/1920) + "px;");
}
cc.setAttribute("style", "width:" + x + "px;height: " + y + "px;");
cv.setAttribute("style", "width:" + cx + "px;heigth: " + cy + "px; position: relative; left: " + cleft + "px");
}
This all works great until I try to capture any event input. As you can see in the JSFiddle, when trying to click on the 'Test' text you will not cause an event to fire.
But if you click ~40px to the left and 20px above the text you will fire the events.
https://jsfiddle.net/3qc3wtr3/2/
Is there a way to keep the resize behavior and to ensure that events are being fired based on the actual location of the elements?
You should use stage.width() and stage.height() to fit a page. You can add scale into stage if you need.
Following is my Code for reference.
One main image is display on Canvas.
On that image with dataJSON object I am passing x and y
co-ordinates and drawing ball images there.
Then tooltip is added. (function tooltipFunc)
But when I am panning image then tooltip is not visible on those
balls images on hover.**
In tooltipFunc function, if code is for default position when
page loads first time. And else code is for translate positions
when we are panning the image to show the tooltip.
But after panning, when mousehover on balls images then tooltip is
not visible. When I click on those ball images then tooltip is
visible but not on the translate position.
Any suggestions?
//Following is Code for reference
var isDown = false;
var startCoords = [];
var last = [0, 0];
canvas.onmousedown = function(e){
isDown = true;
startCoords = [
e.offsetX - last[0],
e.offsetY - last[1]
];
};
canvas.onmouseup = function(e){
isDown = false;
last = [
e.offsetX - startCoords[0], // set last coordinates
e.offsetY - startCoords[1]
];
//tooltipFunc(e);
};
canvas.onmousemove = function(e){
tooltipFunc(e); //tooltip function
if(!isDown) return;
var x = e.offsetX;
var y = e.offsetY;
context.setTransform(1, 0, 0, 1, x - startCoords[0], y - startCoords[1]);
draw1(scaleValue);//redrawing image on canvas while panning image
}
function tooltipFunc(e){
var translationX, translationY;
var r = canvas.getBoundingClientRect(),
x = e.clientX - r.left,
y = e.clientY - r.top,
i = 0,
r,
inTooltip = false;
if((typeof startCoords[0] === 'undefined' || startCoords[0] === 'NaN') && (typeof startCoords[1] === 'undefined' || startCoords[1] === 'NaN')){
for (; r = dataJSON[i]; i++) {
if (x >= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(scaleValue) && x <= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(20/scaleValue) && y >= parseInt(dataJSON[i].y[0] * scaleValue) && y <= parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(20/scaleValue)) {
clearTooltip();
showTooltip(e.clientX, e.clientY, i);
inTooltip = true;
}
}
}
else{
for (; r = dataJSON[i]; i++) {
translationX = parseInt(x) - parseInt(startCoords[0]);
translationY = parseInt(y) - parseInt(startCoords[1]);
if (x >= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(translationX) + parseInt(scaleValue) && x <= parseInt(dataJSON[i].x[0] * scaleValue) + parseInt(translationX) + parseInt(20/scaleValue) && y >= parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(translationY) && y <= parseInt(dataJSON[i].y[0] * scaleValue) + parseInt(translationY) + parseInt(20/scaleValue)) {
clearTooltip();
var newX = e.clientX - translationX;
var newY = e.clientY - translationY
showTooltip(newX, newY, i);
inTooltip = true;
}
}
}
}