Question

如何用GWT的Context2d绘制虚线？ HTML5 canvas有方法setLineDash，但GWT的包装器context2d似乎没有这样的功能吗？

Answer 1

似乎没有开箱即用的解决方案。你需要沿着这条线去并画出破折号和空白。

Javatips.net上的示例（示例＃17，source code）：

/**
     * Draw a dashed line from (fromX, fromY) to (toX, toY).
     * 
     * @param context
     * @param fromX x-coordinate of the starting point
     * @param fromY y-coordinate of the starting point
     * @param toX x-coordinate of the ending point
     * @param toY y-coordinate of the ending point
     * @param dashLength length of the dash
     * @param gapLength length of the gap in between dashes
     */
public static void drawDashedLine(Context2d context, double fromX, double fromY, double toX, double toY, double dashLength, double gapLength) {
    DashedLineHelper checkX = GreaterThanHelper.instance;
    DashedLineHelper checkY = GreaterThanHelper.instance;
    if (fromY - toY > 0) {
        checkY = LessThanHelper.instance;
    }
    if (fromX - toX > 0) {
        checkX = LessThanHelper.instance;
    }
    context.moveTo(fromX, fromY);
    double offsetX = fromX;
    double offsetY = fromY;
    boolean dash = true;
    double ang = Math.atan2(toY - fromY, toX - fromX);
    while (!(checkX.isThereYet(offsetX, toX) && checkY.isThereYet(offsetY, toY))) {
        double len = (dash) ? dashLength : gapLength;
        offsetX = checkX.getCap(toX, offsetX + (Math.cos(ang) * len));
        offsetY = checkY.getCap(toY, offsetY + (Math.sin(ang) * len));
        if (dash) {
            context.lineTo(offsetX, offsetY);
        } else {
            context.moveTo(offsetX, offsetY);
        }
        dash = !dash;
    }
}

/**
 * Helper class for checking the dash line.
 */
private interface DashedLineHelper {

    /**
     * Checks whether the point has been reached yet.
     * 
     * @param from
     * @param to
     * @return
     */
    boolean isThereYet(double from, double to);

    /**
     * Gets the cap of the two values. If the line is increasing, this will
     * return max(v1, v2). If the line is decreasing, this will return
     * min(v1, v2).
     * 
     * @param v1
     * @param v2
     * @return
     */
       double getCap(double v1, double v2);
}

/**
 * Helper for a decreasing line.
 */
private static class LessThanHelper implements DashedLineHelper {
    private static DashedLineHelper instance = new LessThanHelper();

    @Override
    public double getCap(double v1, double v2) {
        return Math.max(v1, v2);
    }

    @Override
    public    boolean isThereYet(double from, double to) {
        return from <= to;
    }       
}

/**
 * Helper for an increasing line.
 */
private static class GreaterThanHelper implements DashedLineHelper {
    private static DashedLineHelper instance = new GreaterThanHelper();

    @Override
    public double getCap(double v1, double v2) {
        return Math.min(v1, v2);
    }

    @Override
    public boolean isThereYet(double from, double to) {
        return from >= to;
    }       
}

Answer 2

正如科林·阿尔沃思（Colin Alworth）在他的comment中指出的那样，您可以通过使用JavaScript画布的内置划线功能来轻松实现虚线。

首先，您需要扩展GWT的Context2d类，并为虚线添加JSNI方法（/*-{和}-*/标记在这里很重要）：

import com.google.gwt.canvas.dom.client.Context2d;

public class MyContext2d extends Context2d {

    protected MyContext2d() {}

    public final native void setLineDash(int[] segments) /*-{
        this.setLineDash(segments);
    }-*/;
}

然后，您可以在Java代码中使用setLineDash()扩展类的Context2d方法来配置破折号，它将显示在浏览器中：

Canvas canvas = Canvas.createIfSupported();
MyContext2d context = canvas.getContext2d().cast();
context.setLineDash(new int[]{20, 20, 5, 20});
// draw line etc...

如何用GWT的Context2d绘制虚线？

2 个答案: