src/utils/canvas.js
// given the brush region return the RLE encoded array
given the brush region return the RLE encoded array
given the brush region return the RLE encoded array
function Region2RLE(region, image, lineOpts) {
  const nw = image.naturalWidth,
    nh = image.naturalHeight;
  var cnt = document.createElement("div");
  cnt.style.display = "none";
  document.body.appendChild(cnt);
  cnt.id = "container-2";
  const stage = new Konva.Stage({
    container: "container-2",
    width: nw,
    height: nh,
  });
  const layer = new Konva.Layer();
  const ctx = layer.getContext("2d");
  if (region._img) ctx.drawImage(region._img, 0, 0);
  const lines = region.touches.map(p => {
    const points = p.rescale(image.stageWidth, image.stageHeight, image.naturalWidth, image.naturalHeight);
    const compOp = p.type === "add" ? "source-over" : "destination-out";
    const l = {
      points: points,
      strokeWidth: p.scaledStrokeWidth(image.stageWidth, image.stageHeight, image.naturalWidth, image.naturalHeight),
      globalCompositeOperation: compOp,
      lineJoin: "round",
      lineCap: "round",
      opacity: 1,
      ...lineOpts,
    };
    return new Konva.Line(l);
  });
  lines.forEach(line => layer.add(line));
  stage.add(layer);
  const data = ctx.getImageData(0, 0, nw, nh);
  const rle = encode(data.data, data.data.length);
  return rle;
}
function Region2RLE ( region , image , lineOpts ) { const nw = image . naturalWidth , nh = image . naturalHeight ; var cnt = document . createElement ( "div" ) ; cnt . style . display = "none" ; document . body . appendChild ( cnt ) ; cnt . id = "container-2" ; const stage = new Konva . Stage ( { container : "container-2" , width : nw , height : nh , } ) ; const layer = new Konva . Layer ( ) ; const ctx = layer . getContext ( "2d" ) ; if ( region . _img ) ctx . drawImage ( region . _img , 0 , 0 ) ; const lines = region . touches . map ( p => { const points = p . rescale ( image . stageWidth , image . stageHeight , image . naturalWidth , image . naturalHeight ) ; const compOp = p . type === "add" ? "source-over" : "destination-out" ; const l = { points : points , strokeWidth : p . scaledStrokeWidth ( image . stageWidth , image . stageHeight , image . naturalWidth , image . naturalHeight ) , globalCompositeOperation : compOp , lineJoin : "round" , lineCap : "round" , opacity : 1 , ... lineOpts , } ; return new Konva . Line ( l ) ; } ) ; lines . forEach ( line => layer . add ( line ) ) ; stage . add ( layer ) ; const data = ctx . getImageData ( 0 , 0 , nw , nh ) ; const rle = encode ( data . data , data . data . length ) ; return rle ; }
given the brush region return the RLE encoded array
given the brush region return the RLE encoded array
// draw the original RLE first // draw all the modifications // stroke: 'red', // strokeWidth: 15, // lineCap: 'round', // lineJoin: 'round' // console.log(l); // add the layer to the stage // get the resulting raw data and encode into RLE format