Liquefaction deformation (forward deformation) ask for advice

Continue with the last question http://bbs.csdn.net/topics/390962881?page=1#post-398737904
The liquefaction formula U has been solved, but the actual use of the picture after the unexpected deformation, not sure which link is wrong, please God Guide

Here's My Code:

var r, Alpha, Angle, sourceposition, destposition, Rmax, M, C, X; for (y =-radius; y < radius; ++y) {//Get circle range for (x =-radius; x < radius; ++x) {if (x * x + y *                Y <= Radius * radius) {destposition = (y + centery) * width + x + CenterX;//1 points in the rear circle (this is the pixel position, not the coordinates)                Destposition *= 4; var rmax = radius; Circle radius c = {x:centerx+80,y:centery};//Move the original point C (assuming right moves to left pixel) M = {X:centerx,y:centery};//move The original point M X = {x: (x + CenterX), Y: (y+ centery)};//move the back circle within the 1-point coordinates var U = liquify (M,x,c,rmax); The liquefaction operation obtains the U-coordinates sourceposition = ((Math.ceil (U.Y)) *width) +math.ceil (u.x);                Approximate integer U coordinates (not yet linear interpolation method) and convert to pixel position sourceposition *= 4;                Replace the original x pixel with u dstpixels[destposition + 0] = srcpixels[sourceposition + 0];                Dstpixels[destposition + 1] = srcpixels[sourceposition + 1]; Dstpixels[destposition + 2] = SRCpixels[sourceposition + 2];            Dstpixels[destposition + 3] = srcpixels[sourceposition + 3];　}}} drawpixels (Canvasid, destimgdata); Drawing start

Picture results after running:

Reply to discussion (solution)

Working with Canvas?
What are your dstpixels and srcpixels? How do you assign a value?

Look at the algorithm srcpixels should be the image data obtained by the Getimagedata method
So how is dstpixels assigned to a value? Because you only modified the inner circle part of the rectangle.
The array of JS is the reference passed
If there is Dstpixels = Srcpixels in the code, then the modification to Dstpixels will be useful to srcpixels
So srcpixels[sourceposition + 0] is likely to have just been modified Dstpixels[destposition + 0]
That's not right.
Only after the deformation data has been generated can it be written back

Thank you for the reply, I'm sorry, I put out the missing code

1. The right is to use the canvas
2. Missing code:

    var sourceimgdata = Originalimagedata; Original image data    var destimgdata = Createcompatibleimagedata (canvasid,sourceimgdata);//write image to canvas    var Srcpixels = Sourceimgdata.data; Get image data    var dstpixels = destimgdata.data;//Get the image data inside the canvas

At present, I do not understand your meaning, my specific thinking is only the pixel in the circle to do the replacement, it is true that after the replacement of all to write back to the canvas, but also to determine the value you calculated is correct, whether I misunderstood the place? I am not sure if the logic of this substitution is correct, and I am troubled by the lack of understanding of the formula.

Thank you for the reply, I'm sorry, I put out the missing code

1. The right is to use the canvas
2. Complete code:

  var sourceimgdata = Originalimagedata; Original image image data var destimgdata = Createcompatibleimagedata (Canvasid,sourceimgdata); Writes an image to the canvas var srcpixels = sourceimgdata.data; Get image data var dstpixels = Destimgdata.data;    Get image data width = sourceimgdata.width in canvas;    Height = sourceimgdata.height;     CenterX = Math.floor (WIDTH/2);    CenterY = Math.floor (HEIGHT/2);    RADIUS = 100;    Copyimagedata (Srcpixels, dstpixels, width, height); Drawpixels (Canvasid, destimgdata);    Draw the entire original image Var r, Alpha, Angle, sourceposition, destposition, Rmax, M, C, X; for (y =-radius; y < radius; ++y) {//Get circle range for (x =-radius; x < radius; ++x) {if (x * x + y *                Y <= Radius * radius) {destposition = (y + centery) * width + x + CenterX;//1 points in the rear circle (this is the pixel position, not the coordinates)                Destposition *= 4; var rmax = radius; Circle radius c = {x:centerx+80,y:centery};//Move the original point C (assuming right moves to left pixel) M = {X:cEnterx,y:centery}; Move the origin M X = {x: (x + CenterX), Y: (y+ centery)};//Move the 1-point coordinates in the back circle var U = liquify (M,x,c,rmax); The liquefaction operation obtains the U-coordinates sourceposition = ((Math.ceil (U.Y)) *width) +math.ceil (u.x);                 Approximate integer U coordinates (not yet linear interpolation method) and convert to pixel position sourceposition *= 4;                Replace the original x pixel with u dstpixels[destposition + 0] = srcpixels[sourceposition + 0];                Dstpixels[destposition + 1] = srcpixels[sourceposition + 1];                Dstpixels[destposition + 2] = srcpixels[sourceposition + 2];            Dstpixels[destposition + 3] = srcpixels[sourceposition + 3];　}}} drawpixels (Canvasid, destimgdata); Draw a circular section

At present, I do not understand your meaning, my specific thinking is only the pixel in the circle to do the replacement, it is true that after the replacement of all to write back to the canvas, but also to determine the value you calculated is correct, whether I misunderstood the place? I am not sure if the logic of this substitution is correct, and I am troubled by the lack of understanding of the formula.

What is the function of Createcompatibleimagedata?
If the destimgdata he returns is a reference to the incoming sourceimgdata, the situation you are experiencing will appear.

function Createcompatibleimagedata (Canvasid, imgdata) {    "use strict";    var context2d = getcontext2d (CANVASID);    Return Context2d.createimagedata (Imgdata.width, imgdata.height);}

Just define canvas context2d, so is my pixwel replacement thinking wrong? What should we do?

Thank!

The process is basically like this

var C=document.getelementbyid ("MyCanvas"); Gets the Canvas control var ctx=c.getcontext ("2d"); var img=new image () img.src = '/photo.jpg '; img.onload = function () {//load picture  Source = Ctx.getimagedata (x, Y, W, h)//Read A rectangular area  //is processed here, note the following  ctx.putimagedata (source, x, y)//write Back}

When processing
Srcpixels = Source.data.concat ([]); This produces a copy (not a reference)
Dstpixels is source.data.

Not quite sure what you mean by reference, is it the meaning of reference? (2 of them will change synchronously)
My Code section should be a copy of a staging, not a reference (or reference)

I thought about the problem I saw, could it be a problem in the area?
The area that should be affected is moved from Origin c to M (red block).


My approach is only to obtain the M circle within the X point and calculate the U substitution, the action block is only M circle, whether this causes the unexpected picture deformation?

I have written a complete test example, you can refer to (of course, a lot of problems, but the meaning of the)
Press the mouse button on the picture and drag the mouse to see the effect

 
  
   
  Your Browser does not support the canvas element.
 
   Mouse position:  viewfinder:  working radiusDecline

Wow... Thank you xuzuning great God, too strong!!

Just bored also on the board on the chaos to answer the question is very fun ~

You have already tested the code you gave, and you've seen it carefully, and it seems to be the same as the PHP version code you gave last time (run with a diminishing radius).

This does achieve the goal, but may not be practical to use in slimming function.

Xuzuning think there's room for discussion in the way I use that formula? Or should I do it for another way?

When you move the mouse from the edge to the center, there is the so-called "body" effect (change the parameters to try)
But the formula doesn't seem to be as he described it (as if it were reversed).
Of course, the program may be wrong, I tried to focus on writing, most of them do not achieve the desired results. Only the last version of PHP has the most obvious effect.
You can see it again.

I've just been playing. The code you provide can indeed be slim, but I think it should not be used commercially, and users may not be able to achieve the results they expect (to be like 美图秀秀). At present in the network, also did not find half realize similar function of person, I think this may really very difficult, thank xuzuning enthusiastic help! I'll take some time to study and see if xuzuning has found new ideas and asks you to discuss sharing with me.

Another PHP board can not edit the post is normal? This is very disturbing, I am in answer to other people's questions, but can not be modified, I always say that I have insufficient authority, even if this article I am a poster, the same can not edit their own posts.

Posts can only be modified within a few minutes after posting
Other time to modify the permissions at the moderator, csdn that is the rule

Algorithmic questions to understand after you discuss, you can send a private email to me

Posts can only be modified within a few minutes after posting
Other time to modify the permissions at the moderator, csdn that is the rule

Algorithmic questions to understand after you discuss, you can send a private email to me

Understand, thank you!

