1

现在，我按照W3School中的示例开发了使用 KonvaJS 进行拖放的 Web 应用程序，移动设备也可以使用它。
到目前为止，它可以在使用 Mozilla Firefox 的桌面模式和移动设备模式下工作。但是，它不适用于使用 Google Chrome 浏览器的移动设备模式。这是有问题的代码。

var width = 300; var height = 400;
var stage = new Konva.Stage({
container: 'MyCanvas',
width: width,
height: height
});
var layer = new Konva.Layer();
stage.add(layer);
// draw into dynacmic canvas element
var PaintCanvas = document.createElement('canvas'); // need to perform flood fill or paint by create canvas outside drag drop mechanic
var PaintContext = PaintCanvas.getContext('2d');
var activeBool = false;
 
var itemURL = '';
var isMobile = false; //initiate as false
// device detection
    if(/Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
        isMobile = true;
    }
    var ImageDirectoryElement = document.getElementById('ImageDirectory'); // the place to show image files in the directory

if(!isMobile)
{
    ImageDirectoryElement.addEventListener("dragstart", dragStart, false);
}
else if(isMobile) {
    ImageDirectoryElement.addEventListener("touchstart", dragStart, false); // so far, it response to touchstart 
}
function dragStart(e)
{
//when the drag starts
itemURL = e.target.src;

if (e.target !== stage) { //if user is dragging circle
activeBool = true; //the drag is active
}

}

var con = stage.container();
 
if(!isMobile)
{
    con.addEventListener("dragover", drag, false);
} else if(isMobile) {
    con.addEventListener("touchmove", drag, false); // however, it failed to response to touchmove 
}
function drag(e)
{
if (activeBool) { //if the drag is active
e.preventDefault(); //the user cant do anything else but drag
}
}
 
if(!isMobile)
{
    con.addEventListener("drop", dragEnd, false);
} else if(isMobile) {
    con.addEventListener("touchend", dragEnd, false);
}
function dragEnd(e)
{
e.preventDefault();
stage.setPointersPositions(e);
var ImageDragDrop = new Image();
PaintCanvas.width = ImageDragDrop.width;
PaintCanvas.height = ImageDragDrop.height;



var ImageCanvasWidth = ImageDragDrop.width;
var ImageCanvasHeight = ImageDragDrop.height;
var ImageCanvasWidthHeightRatio = ImageCanvasWidth/ImageCanvasHeight;
PaintContext.fillStyle = BrushColorString;
PaintContext.strokeStyle = BrushColorString;
PaintContext.lineJoin = "round";
PaintContext.lineCap = "round";
PaintContext.lineWidth = BrushRadius;
PaintContext.shadowBlur = BrushRadius;
PaintContext.shadowColor = BrushColorString;
PaintContext.drawImage(ImageDragDrop, 0, 0);
var image = new Konva.Image({
name: 'FaceImg',
src: itemURL,
id: 'Image' + ImageNumber,
image: PaintCanvas,
draggable: false, // may need to make automatic scaling

});
ImageID = ImageID + ImageNumber;
ImageNumber1 = ImageNumber;
ImageNumber = ImageNumber+1;
ImageID = 'Image';
image.cache();
image.filters([Konva.Filters.Contrast,Konva.Filters.Brighten]);
// the rest are the way to define the top-left position along with the sizes of
// Konva.Image element to maker automatic positioning.

....
}

如果你能想出解决方案来处理不同浏览器中的拖放行为，请告诉我你的分辨率确实有效。

4

0 回答 0