Question

The video显示了在画布上绘制safari的性能问题。

绘图需要100毫秒。平均而言。当我将光标点A移动到B时，其他浏览器在A和B之间的某些点绘制画布。但在safari中，它通常仅在A附近和B附近绘制。如果绘图时间很短，那么safari就像其他人一样。

我认为当safari执行绘图工作时，鼠标事件不会触发到浏览器。有没有办法解决这个问题？

我的代码：

public void draw() {
    long start = System.currentTimeMillis();

    canvas.getContext2d().clearRect(Integer.MIN_VALUE / 2,
            Integer.MIN_VALUE / 2, Integer.MAX_VALUE, Integer.MAX_VALUE);

    canvas.getContext2d().save();
    canvas.getContext2d().setFillStyle("red");
    for (int i = 0; i < 10000; i++) {
        int x = (int)(Math.random() * 1000);
        int y = (int)(Math.random() * 600);
        canvas.getContext2d().fillRect(x, y, 15, 15);
    }
    canvas.getContext2d().restore();


    logger.finer("Draw Time: " + (System.currentTimeMillis() - start));

}



    canvas.addMouseDownHandler(new MouseDownHandler() {

        @Override
        public void onMouseDown(MouseDownEvent event) {
            event.preventDefault();
            startX = event.getX();
            startY = event.getY();
            dragging = true;
        }
    });

    canvas.addMouseMoveHandler(new MouseMoveHandler() {

        @Override
        public void onMouseMove(MouseMoveEvent event) {
            if(dragging)
            {
                event.preventDefault();


                int x = event.getX();
                int y = event.getY();

                canvas.getContext2d().translate((-startX + x) / startScale,
                        (-startY + y) / startScale);
                draw();

                startX = x;
                startY = y;


            }

        }
    });

    canvas.addMouseUpHandler(new MouseUpHandler() {

        @Override
        public void onMouseUp(MouseUpEvent event) {
            dragging = false;

        }
    });

为什么safari会在鼠标移动时合并画布图纸？

0 个答案: