last day (26 days later) » 

6:14 AM
hi, thanjks @Mr.Brickowski
i will tell you clearly the problem
 
hello Viceky, try this feature first time
 
thats okay, if we keep lowest z-index to box image, i think it works fine.....
 
so you want to keep the box image under the mask
 
i hope you got what is the actual problem
thats right......
 
but somehow when dragging is applied on the mask left side, the box popup and cover the mask
 
6:18 AM
if we give higher z-index to mask image and lower z-index to box image, then box image will not override mask image.....
when dragging in left side of mask, box image will cover the mask because when we click on mask image [ left side] , it will assign higher z-index to box image......
so i believe keeping box-image to lowest z-index will solve all the issues.....
 
but it didnt?
 
no, i am not getting how to keep lowest z-index to box images......
i still did't implemented that.....
once we keep lowest z-index to box image, then only we will get to know whether it ll work or not.....
here is full code : pastebin.com/iA4evDfj
in above pastebin, i used below code to keep lowest z-index to box - image.....
ImagePosition.map(function(cur, index) {
                var available = cur.name.includes('mask_');

                if (!available) {
                    $('.masked-img' + index).css({'pointer-events': 'none' , 'z-index':'1'});
                }
            });
is that code correct ? because it not worked for me....
here is website link
 
let me look into your code first
 
thanks a lot.....
 
where is the trigger to set the box image z index to 2?
 
6:33 AM
please search for z-index
only 4 times z-index is there
 
container.enable() ?
 
thats right.....
container.enable related to the active mask image
container.disable related to the non-active mask image.....
below is code to keep box-image z-index to 1 :
ImagePosition.map(function(cur, index) {
                var available = cur.name.includes('mask_');

                if (!available) {
                    $('.masked-img' + index).css({'pointer-events': 'none' , 'z-index':'1'});
                }
            });
 
6:50 AM
please let me know if you have any doubts....
 
7:00 AM
inside container.selected(), there is a foreach
you use it to check which element is selected
window.JQmasks is an array
has 2 entry
id 0 & 1
 
yes, right....
 
but both are referring to the same container object
 
actually before i didt had box images, i use only mask images.....
that time it worked fine, i used those code when there was no box images.....
each image has ids - 0 ,1 ....etc
if i select element 0, then dragging will work in first image.....
if i select element 1, then dragging will work in second image.....
 
7:17 AM
how many canvas are draggable in your design
 
multiple canvas.....
all those 8 images are overlapped with each other..... but still it was working fine as because white part of images are not overlapped..... but in this case color part of image is overlapped.....
 
this is another demo, different than the one you used in the question?
 
yes right..... in 8 images link demo, there are no box images....
in question i used box image
if i dont use box image, then there will be no problem.....
problem will arise only when i use box image.....
 
does box image supposed to be dragged?
 
no, it should be fixed
box image is like background image
i will tell you, we use 2 types of images in json -
1.mask image
2.background images [ example : box image in this question ]
mask images name starts with mask_ in json
background images name starts with other than "mask_"
what the requirement is user ll upload image onclick mask image.....
and user will drag the uploaded image.....
box image and mask image should be fixed in same place......
 
8:02 AM
now lunch time in office, please be here, i ll have lunch and come back......
 
8:26 AM
i provide an answer, please check
 
9:07 AM
sorry for delay, i will check now...
 
 
1 hour later…
10:19 AM
hi , thanks you came here.....
i checked your code and it worked fine, but there is one problem.....
here i updated your code & it works fine : link1
i integrated same code in file which have some more features like zoom, rotate as here : link2
but in the link2, still old problem exists , i am not getting any idea.....
if we click on overlapped part of both images, then box image will cover mask image.....
link1 code : https://pastebin.com/A9jFK1MN

link2 code : https://pastebin.com/x9t8aPd9
please help me for this.....
 
10:45 AM
@Mr.Brickowski sorry, i found the solution for that issue, there was no problem with your code......
 
11:04 AM
so does it work or not?
 
yes, its working.... but in the project, i was using this code :
<script>

 containerElement.click(function(e) {
        // filtering out non-canvas clicks
        if (e.target.tagName !== 'CANVAS') return;

        // getting absolute points relative to container
        const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
        const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;

        const $canvasList = $(this).find('canvas');
        // moving all canvas parents on the same z-index
        $canvasList.parent().css({
but in question i posted only this code :
containerElement.click(function(e) {
        var res = e.target;
        target = res.id;
        if (e.target.getContext) {
            // click only inside Non Transparent part
            var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
            if (pixel[3] === 255) {
                setTimeout(() => {
                    $('#fileup').click();
                }, 20);
            }
        }
    });
so if i use only above code, it work..... but if i use full code , it giving problem as before..... can you please help me to find what the exact issue in that code
i will give you codepen
 
im off now, but you can still share the codepan. i'll check tomorrow
 
okay, thanks for your valuable time & help......
also when you get free time, please help for below question :
0
Q: Delete Uploaded image in canvas

vickey colorsOnce we click on Image , we are displaying File upload dialog box. User can able to upload image. Issue : Then when we click on "Remove" button, its clearing whole canvas. Requirement : but i need to delete only the uploaded image.... Remove Image Code : $("<br/><span id=\"" + newImageLoad...

here is your code : codepen.io/kidsdial/pen/mZoOQV
here is project code : codepen.io/kidsdial/pen/NZJbJv
only difference b/w above 2 files is : containerElement.click(function(e)
 

  last day (26 days later) »