Setting and changing the canvas (0,0) position

[rwillett]

I'm writing code for a CNC machine, most CNC machines have their (0,0) bottom left on the screen, though some have them at different corners just to make life interesting :) Fabric.js puts (0,0) on the top left of the canvas so there's a discrepancy.

I'm looking at two different options to handle putting (0,0) at all four corners of the canvas. However there may be more so would welcome inputs and thoughts....

1. Since I do a lot of points manipulations anyway, adding in more code to modify each point on creation of an object and when I work out the cutting actions is not that major an issue, just a lot of it to do.

2. I extend or modify something (not exactly sure what) in the master Fabric.js object to handle the maths necessary to change the origin to be either bottom left, bottom right or wherever. So I would capture the coordinates coming in (no idea how yet), modify the coordinates to reflect the new origin. Whenever I check coordinates, I return them based on the origin rather than their actual position on the canvas. Doing this at the main and root object level seems the most consistent way but I have to work out actually how to do it (and in Typescript) as I'm uisng electron.js :)

Interested in other views OR how to implement point 2.

Thanks

Rob

[asturur]

Did you try forcing a viewportTransform or change it just at export time?
What is your flow exactly? how does the fabricJS data ends up in the CNC machine?

[rwillett]

Hi,

Not fogotten this at all :)

Each axis is a fabric.js canvas. They need to scale, pan etc in line with the main canvas. The user can't do a great deal with them at the moment but that may (or may not) change...

It's not quite as simple as setting the viewport for the code.

Rob

[rwillett]

I've just focussed on the left ruler to try and simplify things.

I seem to be having all sorts of problems with this after setting the viewport transformation to -1 and setting the pan to the bottom of the screen. It draws the lines correctly, but the numbers on the ruler are mirrored, which is actually what should happen now I think about it. Also some numbers don't appear at all, not sure why. I'm 99.999% sure this is a coding issue in my code and it's not a bug.

I did also change the viewport transformation on the main canvas where I draw rects and things and that also had issues with stuff disappearing and reapperaing as I panned the Fabric canvas. I suspect this is down to my code having built in assumptions about directions.

However the fact that text is mirrored (as it should be) and I hadn't thought about that makes me think that 'simply' changing the viewport transformation isn't the simple change that I would like and I need to dig a lot more into all the code and try and work it out. It might be that the easiest solution is to build this into my code and not do a viewport transformation as the text mirroring will be difficult to resolve.

I need to think about this carefully,

Thanks

Rob

[asturur]

Ok so you can try something else.
Scrap the viewport transform with the mirror ( now that i think of it was a dumb suggestion ). There is a single place in the code where you can alter the meaning of top value.

    /**
     * calculate the translation matrix for an object transform
     * @return {Array} rotation matrix for the object
     */
    _calcTranslateMatrix: function() {
      var center = this.getCenterPoint();
-      return [1, 0, 0, 1, center.x, center.y];
+      return [1, 0, 0, 1, center.x, -center.y];
    },

you can try something like this. At this point Y coordinates, the TOP will work in the opposite direction.

But when you assign an object a position through top and left, what point of the object correspond to top,left in your scheme?

[rwillett]

Thanks for the update.

I've abandoned the mirror viewport transition, it wasn't a dumb idea though, other people suggested it :)

I do like the idea of having a single place for doing this. I have made significant progress with some simple changes to my code to change the rulers, specifically the left ruler to work with the origin at the bottom. I can now easily change the direction the rulers work in both for the left and top rulers. In some respects this was good as it made the code far more generic which is always good.

I can look for this single line in your code and I'll add the minus symbol to see what it does. Its trivial to put the rulers back to working how they originally were, i.e. top down and see what happens.

Your comment on where the object points are when the rulers are changes is spot on and I'm still thinking about this. I am reasonably certain (>99%) that if I draw a rectangle at (0,0) and its 100 in width and height. (0,0) will be bottom left, rather than top left and the point (100,100) will be up and to the right of that point. This means I will have to adjust all the points as I use them. I have not worked out how to do that and so it would be great if your one character fix does all this for me :)

Many thanks for pointing this out, Whats the best way to send a private message to you please?

Thanks

Rob

[asturur]

in that case you have to set all your origins to bottom left,

fabric.Object.prototype.originY = 'bottom'

[rwillett]

Just made the change and the left ruler now works exactly the same as the code I've written. I've done I don;t know how many lines and you have done one character :)

However just realised that this affects every canvas.

So now the left ruler seems to work OK, but not really pushed it yet, but the right top ruler no longer works as the small change affects every canvas. Just looking at the code again, isn't this the same as what you originally suggested though?

thanks

Rob

[rwillett]

I seem to have lost your comment aon what to change. Not sure where it went. Can you repost please?

[asturur]

There is a viewMore button under the long threads

[rwillett]

For some reason I could not see this even after you told me :)

Am experimenting with the change you suggested. Its not working how I expect it to yet, so am going back to basics to make sure I understand what I am doing. I'm 99% certain it's me and I need to work out what I'm doing wrong.

Thanks again

Rob

[asturur]

I'm not exactly sure what are you trying to do either.
It would probably help if you would draw a couple of non symmetrical shapesand explain what you would like to happen that is not happening.

[rwillett]

Hi,

Apologies for the confusion, I'm still not quite sure what's happening and so I'm struggling to explain it properly (or at all). I've spent a few hours trying to work out what I'm doing wrong and what I think should happen.

I've experimenting with drawing shapes to try and find out where the origin is now on the canvas after I make the change

   _calcTranslateMatrix: function() {
      var center = this.getCenterPoint();
	// RBW return [1, 0, 0, 1, center.x, center.y];
      return [1, 0, 0, 1, center.x, -center.y];
    },

I've actually been using lines and circles to try and work it out. I just wanted to work out where the X,Y was plotting as opposed to where it was plotting and the direction. I know what you wanted with asymmetric shapes such as a triangle, I did start with triangles and then dropped that to circles so I was just looking for the X,Y to make it simpler to understand.

So I made the change above to -center.y as suggested.

I then drew the following circles

        var circleOptions1 = {radius: 20 , fill: 'green' , stroke: 'red' , strokeWidth: 1 , left: 0 , top: -100};
        this.cncCanvas.Add(new fabric.Circle(circleOptions1));

        var circleOptions2 = {radius: 20 , fill: 'green' , stroke: 'blue' , strokeWidth: 1 , left: 0 , top: 100};
        this.cncCanvas.Add(new fabric.Circle(circleOptions2));

        var circleOptions3 = {radius: 200 , fill: 'blue' , stroke: 'blue' , strokeWidth: 1 , left: 0 , top: -200};
        this.cncCanvas.Add(new fabric.Circle(circleOptions3));

        var circleOptions4 = {radius: 50 , fill: 'red' , stroke: 'blue' , strokeWidth: 10 , left: 0 , top: -200 , originY: 'top' , originX: 'left'};
        this.cncCanvas.Add(new fabric.Circle(circleOptions4));

	var circleOptions5 = {radius: 50 , fill: 'black' , stroke: 'green' , strokeWidth: 10 , left: 0 , top: 0 , originY: 'center' , originX: 'center'};
        this.cncCanvas.Add(new fabric.Circle(circleOptions5));

        var circleOptions5 = {radius: 50 , fill: 'gray' , stroke: 'red' , strokeWidth: 10 , left: 0 , top: -200 , originY: 'bottom' , originX: 'right'};
	this.cncCanvas.Add(new fabric.Circle(circleOptions5));

	this.cncCanvas.RequestRenderAll();

This produced this:

All the calls to this.cncCanvas.Add are simple wrappers for debugging and call through to the fabric.js calls. There's no other logic there.

Now it seems that (0,0) is still top left as opposed to bottom left, but that the direction of Y is now reversed.

So if I flip

      return [1, 0, 0, 1, center.x, -center.y];
TO
      return [1, 0, 0, 1, center.x, center.y];

I now get this.

The small green circle is a different circle, it has a different border. I was stupid and didn't make it clearer.

So I now think I understand what the negation of center.y does, it doesn't move the origin (0,0) to bottom left, it keeps the origin (0,0) at top left BUT it flips the direction of a positive Y direction from top left downwards to top left upwards.

if this is the case I still need to move the origin to bottom left, probably using the viewport and then set -center.y to be negative.

Apologies for long post, it's taken me a long time to work this out.

Is this what you expected and have I misunderstood?

Many thanks

Rob

[rwillett]

Just found out that when you select an object and move it, the object moves in the Y axis in the opposite direction. Rats!

I'll try and work out if I can invert the Y delta.

[rwillett]

I'm now wondering if this is too complicated as we're getting into the bowels of fabric.js. Changing the behaviour of the object dragging code strikes me as a step too far.

I'm looking at the code now and I wouldn't know where to start.

Having a function that 'simply' translates the points over for each object as its created and cutlines are drawn, but leaving it as-is might be signficantly easier.

The ruler code was already written for setting the origin to bottom left. Your solution is massively easier for that part, but managing the drawing of the object as it's being moved requires me to get deep into the code. Tricky?

Thoughts?

Rob

[asturur]

I have been busy all the week and weekend.
I ll catch up asap

[rwillett]

Understand, thanks for taking the time to reply and look at it.

My personal preference is still to try and do this in the core of fabric.js rather than me hacking layers on top of it and converting from one coordinate system to another.

Thanks

Rob