8

How to detect the center line of a canvas to center an object when it has dragge...

 3 years ago
source link: https://www.codesd.com/item/how-to-detect-the-center-line-of-a-canvas-to-center-an-object-when-it-has-dragged.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

How to detect the center line of a canvas to center an object when it has dragged?

advertisements

This question belongs to fabricJS and canvas.When I dragged a object to a canvas I need to detect center line and snap to it. I found some similar approach in this question. But it deals with div elements. I need to deal with center line of the canvas. How I do this?


You can define snap functionality manually with moving option. Try following.

    'object:moving' : function(e){
    var objCenter = e.target.getLeft() + (e.target.getWidth()/2);

    var targetLine = canvas.left+(canvas.width/2); 

    if(objCenter > targetLine-10 && objCenter < targetLine+10){

        e.target.left = targetLine - (e.target.getWidth()/2) ;
    }else{
        e.target.setOpacity(1);
    }

Related Articles

How to detect the last line in awk before END

i am trying to add last line to the file which i am creating. how is it possible to detect the last line of a file in awk before END ? i need to do this because the variables dont work in the END block, so i am trying to avoid using END. awk ' { do s

how to detect the third line before a certain line

I have a file, like this: <prop type="ltattr-match">1-1</prop> id =>3</prop> <tuv xml:lang="en"> <seg> He is not a good man </seg> And what I want is to detect the third line before the line He is

c # How to detect if a line (painted / drawn on a form) was clicked when using winforms?

I have a winforms application Here is my code using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windo

How to detect the center of a fuzzy circle with opencv

I have got the following image: There are curves on the picture. i would like to find center of the circles containing curves. i tried opencv and hough circle transform but had no results.The natural candidate would be cvHoughCircles. Each part of ea

Flexible container, how to justify the center, but aligned when no space for margin

I have some code which is display flex, it has 2 columns, and i want it to be center aligned when there is real estate, but when the browser shrinks and there is no space , i want it to be left aligned. the content in the right can go hidden, but the

How to detect the Sun from the sky of space in OpenCv?

I need to detect the Sun from the space sky. These are examples of the input images: I've got such results after Morphologic filtering ( open operation for twice ) Here's the algorithm code of this processing: // Color to Gray cvCvtColor(image, gray,

How to detect the modification of the entry when it has changed dynamically

How to detect the changes in input values when it is dynamically changed. as the change on txt2 clear the value in txt1 . I need to detect that it has cleared or changed. Onchange does not do that. <input id="txt1" type="text" oncha

How to detect the character encoding of a Web page programmatically?

I want to get a web page source code by Qt or PyQt ,I know how to get the encoded source code ,then I need get the codec in order to convert it into plain text ,so the problem is how to detect the character encoding of a web page programmatically ?ca

How to match the request line using regex?

request line definition: request_line := request_method + spaces + any number of other characters eg: some valid request lines: GET /user/1 POST /users PUT ABC DELETE XYZ So my question is how to match the request line? I have tried the following, bu

How to detect the empty table when selecting a row in a jQuery Datatable

Giving a simple table like this <table id="exampleTable" class="table hover nowrap"> <thead> <tr> <th>Id</th> <th>Name</th> </tr> </thead></table> Also, using the jQuery Datat

How to print the following line from PHP

hi friends a simple question. How to print the following line from PHP echo <?xml version="1.0" encoding="iso-8859-1"?> I am confused with escape sequences.Printing the XML You can either escape the double quotes like so: echo &q

How to change the separator line color for a single table section?

How to change the separator line color for single table section? I have several sections, but I want to change it only for one of them. In interface builder I can change the color only for all table section separator lines. switch(indexPath.section){

How to detect the client country, location in laravel 4

I want to detect my client country or locale which they open website from or get the browser recommended language. For Example, if you open the browser in Japan it will give me country code or country name current user opened like "en-jp" or &qu

How to detect the row of the cell that has been touched

I have a UITableViewController, and of course a UITableView cell in my application. And I have a push segue(to another UIViewController) for the cell. How to detect the row of the cell which has been touched?You can do this: - (void)prepareForSegue:(

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK