小编ryu*_*suo的帖子

我正在尝试使用画布创建绘图区域.我在绘制曲线时让线条看起来很光滑时遇到了麻烦,而且我的算法中的线条粗细也有变化,看起来很糟糕,因为尺寸跳跃也很多,你可以看到尺寸变化的地方.我确实在stackoverflow上找到了这个链接,但这是一个原生的iPhone应用程序,我无法搞清楚.

这是我目前的JS代码.这是在jsFiddle上运行的

var xStart,
xEnd,
yStart,
yEnd,
paint,
ctx;
$(document).ready(function (){

   ctx = $('canvas')[0].getContext("2d");
   ctx.strokeStyle = '#000';
   ctx.lineJoin="round";
   ctx.lineCap="round";
   ctx.lineWidth = 1;


   $('canvas').bind('mousedown mousemove mouseup mouseleave touchstart touchmove touchend', function(e){
        var orig = e.originalEvent;

        if(e.type == 'mousedown'){
            e.preventDefault(); e.stopPropagation();

            xStart = e.clientX - $(this).offset().left;
            yStart = e.clientY - $(this).offset().top;
            xEnd = xStart;
            yEnd = yStart;

            paint = true;
            draw(e.type);

        }else if(e.type == 'mousemove'){
            if(paint==true){
                xEnd = e.clientX - $(this).offset().left;
                yEnd = e.clientY - $(this).offset().top; …

我正在做一些触摸事件和手势,我希望能够缩放和旋转对象,我已经成功地使它可以拖动,但手势给我带来了麻烦.手势正在起作用,但它们不稳定,每当你捏它放大或缩小或试图旋转它时,它会从一个手指跳到另一个手指.

这是我的代码供参考.

var width = 300; var height = 300; var rotation = 0;
$('.dynamic').live("gesturechange gestureend", function(e){
var orig = e.originalEvent;

if(e.type == 'gesturechange'){
    e.preventDefault();
    $(this).css("width", parseFloat(width) * orig.scale);
    $(this).css("height", parseFloat(height) * orig.scale);
    $(this).css("-webkit-transform","rotate(" + ((parseFloat(rotation) + orig.rotation) % 360) + "deg)");
}else if(e.type == 'gestureend'){
    a.w[ids] = parseFloat(width) * orig.scale;
    a.h[ids] = parseFloat(height) * orig.scale;
    a.rotation[ids] = (parseFloat(rotation) + orig.rotation) % 360;
}
});

反正有没有让它顺利,并防止它从手指跳跃,或者是我采取错误的方法.需要一些提示和技巧和帮助

找到了解决方案

看起来像我的触摸事件因为拖动干扰手势,这就是为什么它一直从手指跳到手指,周围的方式是不使用手势而是计算对象的触摸并使用触摸开始,结束和改变.

这是代码

var touches = 0; var width = 300; var height = …

我有一个帆布drawimage()作为背景.

我有一个橡皮擦工具,我希望能够擦除我绘制的内容,但不能删除画布中的图像.我知道可以将图像作为画布后面的单独元素放置,但这不是我想要的,因为我希望将画布中的内容保存为图像.

我的绘图功能在这里:

function draw (event) {     
    if (event == 'mousedown') {
        context.beginPath();
        context.moveTo(xStart, yStart);
    } else if (event == 'mousemove') {
        context.lineTo(xEnd, yEnd);
    } else if (event == 'touchstart') {
        context.beginPath();
        context.moveTo(xStart, yStart);
    } else if (event == 'touchmove') {
        context.lineTo(xEnd, yEnd);
    }
    context.lineJoin = "round";
    context.lineWidth = gadget_canvas.radius;
    context.stroke();                   
}

如果我需要进一步解释,我会.

先感谢您.

所以我尝试了如果我可以使用jquery将图像附加到图像并且它可以工作,但是图像似乎已经消失或者可见性被隐藏并且看起来没有显示.

所以我的问题是可以做到这一点,我可以使用这个图像.它是我正在进行的项目.

<img src="img/map.png" style="width: 600px; height: 400px; z-index: -100;">

    <img src="img/dot.png" style="position: relative; width: 20px; 
         height:34px; top: 200px; left: 200px; z-index: 100; 
        display: block; visibility: visible;">

</img>

这就是我使用append后代码的样子.如果你在firebug中看到它,你会发现孩子img看起来没有显示,所以我尝试改变能见度,但仍然没有运气.

所以我的问题是这可以做到还是我无法实现.