Canvas 应用 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

实现图像移动


通过mouseup事件获取新的位置,然后通过jQuery的offset方法来完成元素偏移。

moving = function(e){  
    var  mouse={};  
    e.preventDefault();  
    e.stopPropagation();  
    mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft();  
    mouse.y = (e.clientY || e.pageY) + $(window).scrollTop();  
    $container.offset({  
        'left': mouse.x - ( event_state.mouse_x - event_state.container_left ),  
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top )   
    });  
};