Basically I have an svg "SecondSVG" into an svg "FirstSVG" into an svg "MainSVG".Every svg has its own ViewBox. This page can be loaded anywhere on the screen by another page.
So basically how can i find the screen x for viewBox for"SecondSVG" knowing that this svg can be loaded basically anywhere based on the calling page?
event.clientX gives myself the x coordinate for the screen. If I don't know the coordinate for ViewBox of "SecondSVG" then how can I find out the x coordinate inside the ViewBox of "SecondSVG"?
I am using Firefox 3.6.3 and I do have an event object from which I can extract clientX, clientY and other coordinates that are relative to the screen. However what I need are the coordinates inside the ViewBox.
function click(evt)
{
var root = document.getElementById('your svg');
var uupos = root.createSVGPoint();
uupos.x = evt.pageX;
uupos.y = evt.pageY;
var ctm = evt.target.getScreenCTM();
if (ctm = ctm.inverse())
uupos = uupos.matrixTransform(ctm);
///the new x y are : uupos.x , uupos.y
}
Related
I want to embed Amchart3/Webix charts into the SVG element. First of all I created foreign object in the SVG document, then set its position and size. Then appended Webix chart (which is html element like div and canvas) into the foreign object. It was displayed, however, the size of the chart got bigger. I tried amchart3, it also displayed larger than usual. What is the problem?
var elem = this.el(animEl);
var parent = elem.parentNode;
var foreignObject = document.createElementNS('http://www.w3.org/2000/svg', "foreignObject");
var x = (elem.getAttribute('x'));
var y = (elem.getAttribute('y'));
var width = (elem.getAttribute('width'));
var height = (elem.getAttribute('height'));
foreignObject.setAttribute("x", x);
foreignObject.setAttribute("y", y);
foreignObject.setAttribute("height", height);
foreignObject.setAttribute("width", width);
foreignObject.appendChild(chart.getNode());
parent.appendChild(foreignObject);
I have an HTML that looks somewhat like this:
<body>
<img src="image.svg" width="600" height="600" />
<svg width="1500" height="650"/>
</body>
basically a static image SVG with height 600 is placed on top of the svg target for d3js. When I use the function this.getBoundingClientRect() the values for top and bottom include this 600 in them and therefore for capturing mouse events like hovering etc I have to take this offset into account. I also noticed that if I scroll down a bit in the page this offset also changes so fixing it e.g. to 600 is insufficient. Where can I get this viewport-depending offset from dynamically so it is always consistent?
function example(event, bounding) {
// TODO: review this hack
var magicYOffset = 600;
var y = event[1];
var top = bounding.top - magicYOffset;
var bottom = bounding.bottom - magicYOffset;
// TODO: do something with the new top and bottom
return ???;
}
d3.drag()
.on('start', function (d) {
var event = d3.touch(this) || d3.mouse(this);
clickX = event[0];
clickY = event[1];
cursorX = event[0];
cursorY = event[1];
var boundingRect = this.getBoundingClientRect();
var flag = example(event, boundingRect);
...
I would try getting the .offsetLeft and .offsetTop of the SVG. That should take it from the entire page, instead of the viewport, which will keep it from changing.
how do I get the x,y coordinates from a HTML element relative to screen?
I'm using x,y from getBoundingClientRect() as below, but as you can see in the blow image, if I use move the cursor to this x,y position, the curson is in the middle between 0 and + buttons not the 5 button, which is the target button.
What am I missing?
JS code:
var e = document.querySelector('input[id=five]');"
var r = e.getBoundingClientRect();
var x = r.x;
var y = r.y;
MoveMouseTo(x,y); // imaginary call, the real cursor move is done by C# but I can share the code, as needed.
Image:
NOTE: if this aditional info may help, it's a C# application with embedded browser.
const getCoords = (e) => {
var x = e.clientX
var y = e.clientY
var xx = e.screenX
var yy = e.screenY
console.log(x, y, "client")
console.log(xx, yy, "screen")
}
You're going to want to assign this function to a onmousemove event to the outermost div containing the UI for your calculator. This should at least show you the difference between a screen X,Y and a client X,Y
https://www.w3schools.com/code/tryit.asp?filename=FVXZOK1SPTR0
You can try to add an event listener on your element and use the event to retrieve the coordinates of the mouse.
const $element = document.querySelector('input[id=five]');
$element.addEventListener('mousemove', handleMouseMove);
function handleMouseMove (event) {
console.log('Offset from the screen coordinates', event.screenX, event.screenY);
// The client refers to the element you are bound to;
console.log('Offset from the client coordinates', event.clientX, event.clientY);
};
everyone.
It is possible in paper.js change layer start coordinate position from top-left corner?
Use case: I put image into bottom layer and draw some stuff on top layer. Image can be scalled and moved. I need to get my drawing path points coord in image coordinate system. And I want to set my drawing layer coordinate start to image top left point and move it then image scale/move.
I try do this:
var layer = new Layer();
project.activeLayer.setName("DrawingStuff");
project.activeLayer.setPosition(paperjs.project.view.center);
project.activeLayer.bounds.x = 300;
project.activeLayer.bounds.y = 300;
project.activeLayer.bounds.width = raster.width;
project.activeLayer.bounds.height = raster.height;
But it is don't work. Name is setted, but bounds and position still empty.
Will be very thankfull for any advise.
P.S. I know that I can just recalculate path point from canvas coords system to image coords system, but I want to try change layer coords start point
It would be easier to use the current coordinate system and change the zoom and center properties of the project's view. Take a look at the code behind the zoom tool in main.js at http://sketch.paperjs.org:
var lastPoint;
var body = $('body');
zoomTool = new Tool({
buttonClass: 'icon-zoom'
}).on({
mousedown: function(event) {
if (event.modifiers.space) {
lastPoint = paper.view.projectToView(event.point);
return;
}
var factor = 1.25;
if (event.modifiers.option)
factor = 1 / factor;
paper.view.zoom *= factor;
paper.view.center = event.point;
},
...
mousedrag: function(event) {
if (event.modifiers.space) {
body.addClass('zoom-grab');
// In order to have coordinate changes not mess up the
// dragging, we need to convert coordinates to view space,
// and then back to project space after the view space has
// changed.
var point = paper.view.projectToView(event.point),
last = paper.view.viewToProject(lastPoint);
paper.view.scrollBy(last.subtract(event.point));
lastPoint = point;
}
},
...
});
There is the exemple in img
http://imgur.com/rFdcctc
I have a background where i put an image (phone case).
After that i put a rectangle on the top side (50% top). (canvas)
On that i put an svg that is an another mask (that follow the case curves).
The svg is the same as the entire background in size. So to only have the top of the SVG i "clip" a rectangle on to it.
var clipTo = function(ctx) {
var w = mask.width, h = mask.height;
var x = -w/2, y = -h/2;
var rx = 0, ry = 0;
ctx.moveTo(x+rx, y);
ctx.lineTo(x+w-rx, y);
ctx.lineTo(x+w, y+(h/2)-ry);
ctx.lineTo(x+rx,y+(h/2));
ctx.lineTo(x,y+ry);
ctx.closePath();
};
mask.setClipTo(clipTo);
And it works fine. But when i put a dragable image on it the image is mask by the SVG but not the clip rectangle, as if the clip is still there. (in the image, the content of the red rectangle should be invisible)
I have found that there is a clip-rule :
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clip-rule
that could maybe with luck enventually should do it, but i have no idea how to apply it in javascript (i use fabricjs)
So if someone has an idea... :)
Thank you