液化变形（向前变形）问题求教

继续上次的问题 http://bbs.csdn.net/topics/390962881?page=1#post-398737904 已经将液化公式Ｕ解出，但实际使用後图片出现非预期变形，不确定是哪个环节出错，请大神指导 以下是我的代码： var r, alpha, angle, sourcePosition, destPosition, rmax, M, C, X; for (y = -radius; y 登录后复制 运行後图片结果: 回复讨论(解决方案) 用 Canvas 处理？ 你的 dstPixels、srcPixels 分别是什么？怎么赋值的？ 看算法 srcPixels 应该是 getImageData 方法取得的图片数据 那么 dstPixels 是如何赋值的？因为你只修改了矩形的内接圆部分 js 的数组是引用传递的 如果代码中有 dstPixels = srcPixels 的话，那么对 dstPixels 的修改就会作用到 srcPixels 于是 srcPixels[sourcePosition + 0] 得到的可能是前面刚被修改后的 dstPixels[destPosition + 0] 这样就不对了 只有在 变形数据全部生成后，才可写回去 谢谢回覆，抱歉，我把漏掉的代码补上 1. 对的，是用canvas 2. 遗漏代码: var sourceImgData = originalImageData; //原始图片image data var destImgData = createCompatibleImageData(canvasId,sourceImgData); //将image 写入Canvas var srcPixels = sourceImgData.data; //取得image data var dstPixels = destImgData.data; //取得Canvas内image data登录后复制 目前不太理解您的意思，我的具体思维是只对圆内pixel做替换，的确是全部替换完之後才写回canvas，也确定Ｕ算出来的值是正确的，是否有我误解的地方？目前不确定的我这样替换的逻辑是否正确，对於那个公式无法理解，我的资质太浅好困扰.. 谢谢回覆，抱歉，我把漏掉的代码补上 1. 对的，是用canvas 2. 完整代码: var sourceImgData = originalImageData; //原始图片image data var destImgData = createCompatibleImageData(canvasId,sourceImgData); //将image 写入Canvas var srcPixels = sourceImgData.data; //取得image data var dstPixels = destImgData.data; //取得Canvas内image data width = sourceImgData.width; height = sourceImgData.height; centerX = Math.floor(width / 2); centerY = Math.floor(height / 2); radius = 100; copyImageData(srcPixels, dstPixels, width, height); drawPixels(canvasId, destImgData); //绘出整张原图 var r, alpha, angle, sourcePosition, destPosition, rmax, M, C, X; for (y = -radius; y 登录后复制 目前不太理解您的意思，我的具体思维是只对圆内pixel做替换，的确是全部替换完之後才写回canvas，也确定Ｕ算出来的值是正确的，是否有我误解的地方？目前不确定的我这样替换的逻辑是否正确，对於那个公式无法理解，我的资质太浅好困扰.. createCompatibleImageData 是个什么函数 如果 他返回的 destImgData 是传入的 sourceImgData 的引用的话，就会出现你遇到的情况 function createCompatibleImageData(canvasId, imgData) { "use strict"; var context2d = getContext2d(canvasId); return context2d.createImageData(imgData.width, imgData.height);}登录后复制 就只是定义canvas context2d 而已，所以我的pixwel替换的思维是错误的吗？应该怎麽做才对？ 感谢！ 流程大致是这样 var c=document.getElementById("myCanvas"); //获取 Canvas 控件var ctx=c.getContext("2d"); var img=new Image()img.src = '/photo.jpg';img.onload = function() { //加载图片 source = ctx.getImageData( x, y, w, h) //读取一个矩形区域 //在这里进行处理，注意事项在下面 ctx.putImageData(source, x, y) //写回去}登录后复制 处理时 srcPixels = source.data.concat([]); //这样产生副本（非引用） dstPixels 就是 source.data 不太清楚您指的引用是什麽意思，是参照的意思吗？(2者会同步变化) 我的代码部分应该是复制一份暂存，不是参照(或引用) 我想了一下所看的问题，是否可能是作用区域有问题？ 应该受影响的区域从原点Ｃ移动到Ｍ时(红色区块) 我的做法只有取得Ｍ圆内Ｘ点并算出Ｕ替换，作用区块也只有Ｍ圆，是否是这原因引起非预期图片变形？ 我写了个完整的测试例，你可参考一下（当然毛病很多，但意思到了） 在图片上按下鼠标键并拖动鼠标就可看到效果 start = 0;x = y = 0;r = 60;function $(id) { return document.getElementById(id);}window.onload = function() { var c = $("myCanvas"); ctx = c.getContext("2d"); var img=new Image() img.src = '/00.jpg'; //待处理图片 img.onload = function() { c.width = this.width * 2 + 10; c.height = this.height; ctx.drawImage(img, 0, 0); ctx.drawImage(img, this.width+10, 0); //我喜欢弄个对照组 }}window.onmouseup = function(e) { start = 0;}window.onmousedown = function(e) { $("mouse").innerHTML = e.x + ', ' + e.y; start = 1; x = e.x; y = e.y; r = parseInt($('r').value);}window.onmousemove = function(e) { if(start) { $("mouse").innerHTML = e.x + ', ' + e.y; forward(ctx, r, x, y, e.x, e.y) x = e.x; y = e.y; r -= $('dj').value; }}function forward(im, r, cx, cy, mx, my) { var p = im.getImageData( cx-r, cy-r, r+r, r+r); $('box').innerHTML = p.width + 'x' + p.height; var dst = p.data; var src = [], i; for(i=0; iYour browser does not support the canvas element.鼠标位置:取景框:工作半径递减登录后复制 哇...谢谢xuzuning大神，太强大了！！ 刚刚无聊也在板上乱晃回答问题 挺好玩的~ 已经测试过您给的代码，也仔细看过，执行原理似乎跟您上次给的php版本代码一样(用递减半径的方式运行?) 这样子的确有达到目的，但是可能无法实际应用在瘦身功能。 xuzuning觉得我用那个公式的方式还有讨论的空间吗？还是我应该做罢寻求其他方式？ 当你将鼠标从边缘向中心移动时，的确有所谓“?身“的效果（改变参数试试） 不过这个这个公式似乎并不像他描述的那样（好像反了） 当然也可能是程序写错了，我尝试了集中写法，大多都不能实现期望的结果。只有上次那个php版的效果最明显 你可以再看看 刚刚一直在玩您提供的那个代码 的确可以达到瘦身，但我想应该无法使用在商业用途，使用者用起来可能无法达到他们预期的效果(要做到像美图秀秀那样)。目前在网路上，也没找到半个实现类似功能的人，我想这可能真的相当困难，感谢xuzuning热心协助！我再花些时间研究看看，如果xuzuning有发现新思维，也恳请您与我讨论分享。 另外PHP板无法编辑帖子是正常的吗? 这样很困扰，我在回答别人问题时写错字却无法修改，一直说我权限不足，即使此篇我是发帖者，一样无法编辑自己的帖子。 贴子只在发布后数分钟内贴主可修改 其他时间修改的权限在版主，CSDN就是这样规定的 算法问题待想明白后在于你商讨，你可以私信发个 email 给我 贴子只在发布后数分钟内贴主可修改 其他时间修改的权限在版主，CSDN就是这样规定的 算法问题待想明白后在于你商讨，你可以私信发个 email 给我 了解，谢谢您！