4 posts tagged with "canvas"

// store/index.ts
import Konva from "konva";
import { makeObservable, observable, computed, action } from "mobx";

class EditorStore {
  stage: IStage = {
    ref: null, // 暂存konva画布实例
  };
  editMode = EditMode.Map; // 编辑模式，分为地图和场景编辑
  isEdit = false; // 编辑锁
  isDrawLine = false; // 画线锁
  // 统一处理场景元素的绘制
  drawCallForScene = (type: ESceneElement) => {
    this.isEdit = true;
    switch (type) {
      case ESceneElement.Vehicle: {
        break;
      }
      default: {
        break;
      }
    }
    this.isEdit = false;
  };
  // 统一处理地图元素的绘制
  drawCallForMap = (type: EMapElement) => {
    this.isEdit = true;
    switch (type) {
      case EMapElement.Line: {
        this.isDrawLine = true;
        break;
      }
      default: {
        break;
      }
    }
    this.isEdit = false;
  };
  // 在初始化画布时执行，挂载画布事件
  initStage = () => {
    const stage = this.stage.ref!;
    const layer = stage.getLayers()[0];
    // ...
  };
  // 地图
  mapList = [];
  currentMap = "";
  // 场景
  sceneList = [];
  currentScene = "";
  // 元素
  selectedElement = null;
  // 当前选中的元素的属性，基础属性包括位置、颜色、旋转、大小、名称等
  selectedElementProps = null;

  constructor() {
    makeObservable(this, {
      stage: observable.shallow,
      editMode: observable,
      // ...文章代码可能不全，感兴趣自行查阅github源码
    });
  }
}

// store/index.ts
// ...
initStage = () => {
  // ...
  // 初始化控制器
  this.transformer = new Konva.Transformer({
    // 启用旋转
    rotateEnabled: true,
    // 设置旋转吸附角度
    rotationSnaps: [0, 90, 180, 270],
  });
  layer.add(this.transformer);
  // ...然后监听点击事件，在点击到具体shape的时候动态加上控制器
  stage.on("click", (e) => {
    if (e.target === stage) {
      this.transformer!.nodes([]);
    } else {
      const target = e.target as Konva.Shape;
      // 这里其实可以做下限制，有些元素可能是不允许编辑的
      // 比如地图元素在场景编辑模式下是不可编辑的
      // if (target !== this.currentLine) {
      this.transformer!.nodes([target]);
      this.selectedElement = target;
      // }
    }
  });
};

// store/index.ts
// ...
initStage = () => {
  //...
  // 绘制自车
  const autoCar = createRect({
    fill: "green",
    x: 0,
    y: 0,
    width: 30,
    height: 20,
    strokeWidth: 1,
  });
  layer.add(autoCar);
};

import Konva from "konva";

type ShapeType = "rect" | "circle" | "line" | "polygon" | "triangle";

export function createRect(config: Konva.RectConfig) {
  return createShape("rect", {
    width: 100,
    height: 80,
    ...config,
  });
}

export function createCircle(config: Konva.CircleConfig) {
  return createShape("circle", {
    radius: config?.radius || 50,
    ...config,
  });
}

export function createTriangle(config: Konva.ShapeConfig) {
  return createShape("triangle", {
    offset: { x: 0, y: -15 }, // 居中调整
    ...config,
  });
}

/**
 * 图形基类
 */
export function createShape(type: ShapeType, config: any) {
  const defaults = {
    x: 0,
    y: 0,
    fill: Konva.Util.getRandomColor(),
    draggable: true,
    stroke: "#333",
    strokeWidth: 2,
  };

  const shapeConfig = { ...defaults, ...config };
  let shape: Konva.Shape;

  switch (type) {
    case "rect":
      shape = new Konva.Rect(shapeConfig);
      break;
    case "circle":
      shape = new Konva.Circle({
        radius: 50,
        ...shapeConfig,
      });
      break;
    case "line":
      shape = new Konva.Line({
        points: [0, 0, 100, 100], // 默认对角线
        lineCap: "round",
        ...shapeConfig,
      });
      break;
    case "polygon":
      shape = new Konva.RegularPolygon({
        sides: 5, // 默认五边形
        radius: 60,
        ...shapeConfig,
      });
      break;
    case "triangle":
      shape = new Konva.Shape({
        sceneFunc: function (context: Konva.Context, shape: Konva.Shape) {
          context.beginPath();
          context.moveTo(0, -30);
          context.lineTo(30, 30);
          context.lineTo(-30, 30);
          context.closePath();
          context.fillStrokeShape(shape);
        },
        ...shapeConfig,
      });
      break;
  }
  shape!.on("click", () => console.log(`${type} clicked`));
  shape!.on("dragend", () => console.log(`${type} moved`));
  return shape!;
}

new Konva.Stage({
  container: containerRef.current,
  width: container.clientWidth,
  height: container.clientHeight,
  draggable: true,
});

// scene-editor/index.tsx
// 监听鼠标滚轮事件
const MIN_SCALE = 0.5; // 最小缩放比例
const MAX_SCALE = 3; // 最大缩放比例
const handleWheel = (e: any) => {
  const stageRef = stage.ref!;
  const step = 1.1;
  const oldScale = stageRef.scaleX();
  const pointer = stageRef.getPointerPosition()!;
  let newScale = e.deltaY < 0 ? oldScale * step : oldScale / step;
  // 有最大和最小范围限制
  newScale = Math.min(Math.max(newScale, MIN_SCALE), MAX_SCALE);
  const mousePointTo = {
    x: (pointer.x - stageRef.x()) / oldScale,
    y: (pointer.y - stageRef.y()) / oldScale,
  };
  stageRef.scale({ x: newScale, y: newScale });
  const newPos = {
    x: pointer.x - mousePointTo.x * newScale,
    y: pointer.y - mousePointTo.y * newScale,
  };
  stageRef.position(newPos);
  stageRef.batchDraw();
};
// ...

// store/index.ts
focusOrigin = () => {
  if (this.stage.ref) {
    // 清除拖拽产生的位移偏差
    this.stage.ref.x(0);
    this.stage.ref.y(0);
    const centerX = -this.stage.ref.width() / 2;
    const centerY = -this.stage.ref.height() / 2;
    this.stage.ref.offset({ x: centerX, y: centerY });
  }
};

// store/index.ts
// 暂存的线段对象，用于绘制多段直线
// ...
isDrawLine = false;
currentLine: Konva.Line | null = null;
// 点击顶部操作栏的线段按钮，会加编辑锁，便于多段线段的绘制
drawCallForMap = (type: EMapElement) => {
  this.isEdit = true;
  switch (type) {
    case EMapElement.Line: {
      this.isDrawLine = true;
      break;
    }
    default: {
      break;
    }
  }
  this.isEdit = false;
};
// 在初始化画布时执行，挂载画布事件
initStage = () => {
  const stage = this.stage.ref!;
  const layer = stage.getLayers()[0];
  // 点击时新建线段
  stage.on("mousedown", () => {
    if (this.isDrawLine) {
      const pos = stage.getPointerPosition()!;
      this.currentLine = new Konva.Line({
        points: [pos.x, pos.y],
        fill: "yellow",
        stroke: "yellow",
        strokeWidth: 2,
      });
      layer.add(this.currentLine);
    }
  });
  // 移动鼠标可以选择下一段线段的落点
  // TODO 这里其实可以做下节流
  stage.on("mousemove", () => {
    if (this.currentLine && this.isDrawLine) {
      const pos = stage.getPointerPosition()!;
      let newPoints = [];
      if (this.currentLine.points().length > 2) {
        newPoints = this.currentLine
          .points()
          .slice(0, -2)
          .concat([pos.x, pos.y]);
      } else {
        newPoints = this.currentLine.points().concat([pos.x, pos.y]);
      }
      this.currentLine.points(newPoints);
      layer.batchDraw();
    }
  });
  // 监听键盘事件，这里设定在点击ESC键时结束线段的绘制
  const onKeydown = (e: any) => {
    if (e.key === "q") {
      if (this.isDrawLine && this.currentLine) {
        const newPoints = this.currentLine.points().slice(0, -2);
        this.currentLine.points(newPoints);
        layer.batchDraw();
        this.isDrawLine = false;
        this.currentLine = null;
      }
    }
  };
  window.addEventListener("keydown", onKeydown);
};

// store/index.ts
isDrawMapElement: EMapElement | null = null;
// 车道辅助绘制，计算当前点击的次数
drawLaneCount = 0;
// 当前车道，多边形对象
currentLane: Konva.Shape | null = null;
stage.on("mousedown", () => {
  // ...
  if (this.isDrawMapElement === EMapElement.Lane) {
    // 第一次点击，先绘制宽度线
    if (this.drawLaneCount === 0) {
      this.currentLine = new Konva.Line({
        points: [pointX, pointY],
        fill: "yellow",
        stroke: "yellow",
        strokeWidth: 2,
      });
      layer.add(this.currentLine);
      // 第二次点击，确定宽度
    } else if (this.drawLaneCount === 1) {
      this.currentLine!.points().push(pointX, pointY);
      // 第三次点击，确定长度
    } else if (this.drawLaneCount === 2) {
      this.currentLane?.destroy();
      const points = [
        this.currentLine!.points()[0],
        this.currentLine!.points()[1],
        this.currentLine!.points()[2],
        this.currentLine!.points()[3],
        pointX,
        pointY,
        pointX -
          (this.currentLine!.points()[2] - this.currentLine!.points()[0]),
        pointY -
          (this.currentLine!.points()[3] - this.currentLine!.points()[1]),
      ];
      this.currentLane = new Konva.Shape({
        // 顶点坐标数组
        points,
        fill: "yellow",
        stroke: "green",
        opacity: 0.2,
        strokeWidth: 2,
        sceneFunc: function (ctx, shape) {
          const points = shape.getAttr("points");
          ctx.beginPath();
          ctx.moveTo(points[0], points[1]);
          for (let i = 2; i < points.length; i += 2) {
            ctx.lineTo(points[i], points[i + 1]);
          }
          ctx.closePath();
          ctx.fillStrokeShape(shape);
        },
      });
      layer.add(this.currentLane);
      this.drawDone(EMapElement.Lane);
    }
    this.drawLaneCount++;
  }
})
stage.on("mousemove", () => {
  // ...
  if (this.currentLine && this.isDrawMapElement === EMapElement.Lane) {
    const pos = stage.getPointerPosition()!;
    const pointX = stage.offset().x + pos.x;
    const pointY = stage.offset().y + pos.y;
    let newPoints = [];
    if (this.drawLaneCount === 1) {
      if (this.currentLine.points().length > 2) {
        newPoints = this.currentLine
          .points()
          .slice(0, -2)
          .concat([pointX, pointY]);
      } else {
        newPoints = this.currentLine.points().concat([pointX, pointY]);
      }
      this.currentLine.points(newPoints);
      layer.batchDraw();
    } else if (this.drawLaneCount === 2) {
      this.currentLane?.destroy();
      // NOTE 注意按逆时针排，和threejs自定义多边形点集一致
      const points = [
        this.currentLine!.points()[0],
        this.currentLine!.points()[1],
        this.currentLine!.points()[2],
        this.currentLine!.points()[3],
        pointX,
        pointY,
        pointX -
          (this.currentLine!.points()[2] - this.currentLine!.points()[0]),
        pointY -
          (this.currentLine!.points()[3] - this.currentLine!.points()[1]),
      ];
      this.currentLane = new Konva.Shape({
        points,
        fill: "yellow",
        stroke: "green",
        opacity: 0.2,
        strokeWidth: 2,
        sceneFunc: function (ctx, shape) {
          const points = shape.getAttr("points");
          ctx.beginPath();
          ctx.moveTo(points[0], points[1]);
          for (let i = 2; i < points.length; i += 2) {
            ctx.lineTo(points[i], points[i + 1]);
          }
          ctx.closePath();
          ctx.fillStrokeShape(shape);
        },
      });
      layer.add(this.currentLane);
    }
  }
})
// 在这里统一处理绘制结束的逻辑
drawDone = (type: EMapElement | ESceneElement) => {
  // ...
  if (type === EMapElement.Lane) {
    const contour = _.chunk(this.currentLane?.getAttr("points"), 2).map(
      (item) =>
        ({
          x: item[0],
          y: item[1],
          z: 0,
        } as { x: number; y: number; z: number })
    );
    const data: IFreespace = {
      id: "freespace" + this.mapElements.lanes.length,
      contour,
    };
    this.mapElements.lanes.push(data);
    this.currentLine?.destroy();
    this.currentLane = null;
    this.currentLine = null;
    this.drawLaneCount = 0;
  }
}

// store/index.ts
// 当前正在绘制的场景元素
isDrawSceneElement: ESceneElement | null = null;
drawCallForScene = (type: ESceneElement) => {
  this.isEdit = true;
  switch (type) {
    case ESceneElement.Vehicle: {
      this.isDrawSceneElement = ESceneElement.Vehicle;
      break;
    }
    default: {
      break;
    }
  }
  this.isEdit = false;
};
// ...
stage.on("click", (e) => {
  if (e.target === stage) {
    // ...
    if (this.isDrawSceneElement === ESceneElement.Vehicle) {
      const pos = stage.getPointerPosition()!;
      const pointX = stage.offset().x + pos.x;
      const pointY = stage.offset().y + pos.y;
      const vehicle = createRect({
        fill: "blue",
        x: pointX,
        y: pointY,
        width: 40,
        height: 30,
        strokeWidth: 1,
        // 居中
        offsetX: 15,
        offsetY: 10,
      });
      layer.add(vehicle);
      layer.batchDraw();
      // 自动选中
      this.transformer!.nodes([vehicle]);
      this.isDrawSceneElement = null;
    }
  } else {
    // ...
  }
});

// 编辑器输出的场景数据
export interface ISceneData {
  autoCar: {
    pos: number[];
    rotation: number;
    path: number[][];
  };
  map: IMapElements;
  scene: ISceneElements;
}
// 自车属性
export interface IAutoCar {
  ref: Konva.Rect | null;
  config: {
    x: number;
    y: number;
    rotation: number;
  };
  path: number[][];
  speed: number;
}
// 地图元素集合
export interface IMapElements {
  lines: ILine[];
  lanes: IFreespace[];
}
// 场景元素集合
export interface ISceneElements {
  vehicles: ICube[];
  obstacles: ICube[];
}

// renderer/index.ts
// 模拟匀速行驶
// ...
if (path.length > 0) {
  // 生成平滑曲线
  const curve = new THREE.CatmullRomCurve3(
    path.map((p) => new THREE.Vector3(p[0] / 100, -p[1] / 100, 0)),
    false
  );
  const totalLength = curve.getLength();
  // 总时长 ms
  this.totalDuration = (totalLength / speed) * 1000;
  // 拆分为5000个点
  this.pathPoints = curve.getPoints(5000);
}
// ...
totalDuration = 0;
pathPoints: any[] = [];
startTime = 0;
currentIndex = 0;
mockAutoDrive() {
  if (!this.startTime) this.startTime = performance.now();
  const elapsed = performance.now() - this.startTime;
  const progress = Math.min(elapsed / this.totalDuration, 1);
  this.currentIndex = Math.floor(progress * (this.pathPoints.length - 1));
  if (this.currentIndex < this.pathPoints.length - 1) {
    const currentPoint = this.pathPoints[this.currentIndex];
    const nextPoint = this.pathPoints[this.currentIndex + 1];
    // 动态计算自车位置
    this.egoCar!.group.position.set(currentPoint.x, -currentPoint.y, 0);
    // 自车朝向
    const dx = nextPoint.x - currentPoint.x;
    const dy = nextPoint.y - currentPoint.y;
    this.egoCar!.group.rotation.z = -Math.PI / 2 + Math.atan2(dx, dy);
  }
}