遇到一个将HTML5 Canvas的内容保存为图片问题

lufy

minmin 发表于 2015-3-23 18:37
在这个问题上，我也遇到了麻烦。

大致意思：

你的链接打不开
我试了试，没发现问题，你可以参考下面demo
http://lufylegend.com/demo/test/81.html
HTML5没办法直接保存图片，你可以借助后台语言，比如php，java等来实现保存下载功能

minmin

我现在是pad打开的。链接可以打开。下午发帖是pc上也可以打开呢。明天用电脑看下您的方法。谢谢老师。

minmin

lufy 发表于 2015-3-23 22:18
你的链接打不开
我试了试，没发现问题，你可以参考下面demo
http://lufylegend.com/demo/test/81.html

lufy老师，我发现了，我在本机浏览时，parent.getDataURL()会报错。报错如图
但是传到服务器上看就没错。window.open(picdata)都可以打开。

但是又发现了新的问题，为啥有的mouseDown事件不起作用呢？

demo的地址是：http://m.yx.renren.com/2090/xm/draw/index.html

该链接 改变画笔粗细的功能在pc上打开都是好的。可是在ipad mini、在iphone6 plus上拖动都没有用。

lufy

minmin 发表于 2015-3-24 11:10
lufy老师，我发现了，我在本机浏览时，parent.getDataURL()会报错。报错如图
但是传到服务器上看就没错。w ...

引擎中的getDataURL和canvas的toDataURL一样，一般是不支持本地运行的，需要在服务器上才可以
拖动那里你试一下在startDrag加上参数看看怎么样

1. startDrag(e.touchPointID);

复制代码

lufy

minmin 发表于 2015-3-24 11:10
lufy老师，我发现了，我在本机浏览时，parent.getDataURL()会报错。报错如图
但是传到服务器上看就没错。w ...

另外看你拖动的时候，还判断了对象的移动范围，如果用最新版本1.9.9的话，可以设置对象的可拖动范围，就不需要自己写一遍了，
不过自己写当然也可以，API如下
http://lufylegend.com/api/zh_CN/ ... #property_dragRange

minmin

lufy 发表于 2015-3-24 12:11
另外看你拖动的时候，还判断了对象的移动范围，如果用最新版本1.9.9的话，可以设置对象的可拖动范围，就不 ...

确实是这样。我一直在于它奋斗。。。
因为我要确保那个滑块在一个范围内拖动。
看到您说的e.touchPointId后，我加上后的效果是：第一次在移动打开后，想怎么拖就怎么拖，释放后，再拖，就非要正式的点一下滑块，放手，然后再拖，才起作用（如果第二次拖的时候，是直接拖，那就拖不动了，非要先点一下，放开，再拖才行）

后来我发现API里有dragRange,不过我用了一下还没起作用，可能是因为引用的js的版本的问题。我重新试一下。。。

minmin

lufy 发表于 2015-3-24 12:11
另外看你拖动的时候，还判断了对象的移动范围，如果用最新版本1.9.9的话，可以设置对象的可拖动范围，就不 ...

我测试了，就是因为我写了判断对象的移动范围，所以在第二次拖动的时候才不灵敏。（这样肯定是不行的，但不知道为什么）所以我继续找，才找到dragRange这个属性。

lufy

minmin 发表于 2015-3-24 14:37
我测试了，就是因为我写了判断对象的移动范围，所以在第二次拖动的时候才不灵敏。（这样肯定是不行的，但 ...

为什么不用LRange呢，这个连拖拽事件都省了
http://lufylegend.com/api/zh_CN/out/classes/LRange.html

minmin

minmin 发表于 2015-3-24 14:37
我测试了，就是因为我写了判断对象的移动范围，所以在第二次拖动的时候才不灵敏。（这样肯定是不行的，但 ...

1.9.9的版本使用上了。判断移动的代码如下：
function onDown_tool(e){
        var str=e.currentTarget.name
        if(str=="kuai"){                 
        var rect=new LRectangle(kuaiMc.oriX,kuaiMc.oriY,sliderMc.getWidth()-kuaiMc.getWidth(),0);
            kuaiMc.dragRange=rect;
                kuaiMc.startDrag(e.touchPointID);
                return;
        }
        var id=Number(str.substr(1,1));
        colorValue=colorNums[id-1];
}

function onUp_tool(e){        
        brushValue=(kuaiMc.x-kuaiMc.oriX)/sliderMc.getWidth()*40+2;
        kuaiMc.stopDrag();        
}

但是在移动端的第二次滑动时，还是不够灵敏。PC端上表现很好。不知道为什么。。。
测试地址没变。http://m.yx.renren.com/2090/xm/draw/index.html

lufy

minmin 发表于 2015-3-24 14:55
1.9.9的版本使用上了。判断移动的代码如下：
function onDown_tool(e){
        var str=e.currentTarget. ...

出现这个问题，最有可能的就是跟其他的事件起了冲突
你要的这个功能其实就是Range啊
引擎自带的ui提供了LRange，这个组件应该能解决你的这个问题，你试一下看看吧，
用法很简单，API中也有demo