Custom type cell paint

Custom type cell paint

Posted by: pedro.moraes on 20 March 2023, 1:48 pm EST

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 20 March 2023, 1:48 pm EST - Updated 20 March 2023, 1:55 pm EST

  Hello,
  
  I’m creating a custom type of cell and I’m using a path2D, but I’m having to move the icon to be aligned but I can’t. I need to rotate 180 degrees and center vertical and horizontal. Can you help me?

  this is my code snippet

    paint(
      ctx: CanvasRenderingContext2D,
      _value: any,
      x: number,
      y: number,
      w: number,
      _h: number,
      _style: GC.Spread.Sheets.Style,
      _context?: any
    ) {
      if (!ctx) {
        return;
      }
      ctx.save();
      ctx.fillStyle = '#45DD98';
      ctx.translate(x + w, y);
      ctx.scale(-0.018, 0.018);
      ctx.fill(
        new Path2D(
          'M512 554.666c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0h-57.6l21.333 76.8c15.29 53.999 63.775 93.042 121.506 93.866l0.094 0.001c0.101 0 0.22 0.001 0.339 0.001 31.419 0 58.872-16.98 73.683-42.265l0.218-0.403c7.282-13.711 21.472-22.89 37.806-22.89 23.564 0 42.667 19.103 42.667 42.667 0 8.495-2.482 16.409-6.761 23.059l0.102-0.169c-30.058 51.373-84.964 85.334-147.802 85.334-0.088 0-0.177 0-0.265 0h0.014c-96.826-0.742-178.238-65.874-203.579-154.655l-0.367-1.505-27.733-99.84h-66.987c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h42.667l-109.227-395.52c-5.19-18.13-21.617-31.176-41.090-31.176-0.554 0-1.106 0.011-1.656 0.032l0.079-0.002h-61.44c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h63.147c58.521 0.028 107.856 39.323 123.088 92.964l0.219 0.902 116.053 418.133zM891.307 128h-37.973c-15.368 0.162-28.772 8.424-36.159 20.714l-0.107 0.193-63.573 107.093 64.427 107.093c7.347 12.25 20.374 20.434 35.347 20.905l0.066 0.002h37.12c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0h-37.12c-46.357-0.073-86.928-24.778-109.333-61.724l-0.321-0.569-40.533-67.84-40.533 67.84c-22.432 37.043-62.246 61.59-107.846 62.292l-0.101 0.001h-37.12c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h37.12c15.368-0.162 28.772-8.424 36.159-20.714l0.107-0.193 63.573-107.093-64.427-107.093c-7.347-12.25-20.374-20.434-35.347-20.905l-0.066-0.002h-37.12c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h37.12c46.357 0.073 86.928 24.778 109.333 61.724l0.321 0.569 39.68 65.707 40.533-67.84c22.995-36.364 62.991-60.16 108.544-60.16 0.090 0 0.18 0 0.27 0h37.106c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z'
        )
      );
      ctx.restore();
    }

  my current result
  
  

  I need it to stay like this
  
  

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 22 March 2023, 12:12 am EST

  Hello,
  
  As I can understand, you want to draw the ‘fx’ icon straight not upside down. To do this you need to rotate the the canvas grid by 180 degrees so that the icon is drawn straight not upside down. You can use ctx.save() and ctx.restore() method to preserve the state of context and roll back to previous state of context respectively.
  
  Please refer to the attached code snippet and attached sample.

  let oldPaintFn = GC.Spread.Sheets.CellTypes.Text.prototype.paint;
  GC.Spread.Sheets.CellTypes.Text.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
      if (!ctx) {
          return;
      }
      if (context.row < 1 && context.col < 1) {
          ctx.save();
          ctx.fillStyle = '#45DD98';
          ctx.translate(x + w - 20 * context.sheet.zoom(), y + h);
          ctx.scale(-0.018 * context.sheet.zoom(), 0.018 * context.sheet.zoom());
          ctx.rotate(Math.PI);
          ctx.fill(
              new Path2D(
                  'M512 554.666c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0h-57.6l21.333 76.8c15.29 53.999 63.775 93.042 121.506 93.866l0.094 0.001c0.101 0 0.22 0.001 0.339 0.001 31.419 0 58.872-16.98 73.683-42.265l0.218-0.403c7.282-13.711 21.472-22.89 37.806-22.89 23.564 0 42.667 19.103 42.667 42.667 0 8.495-2.482 16.409-6.761 23.059l0.102-0.169c-30.058 51.373-84.964 85.334-147.802 85.334-0.088 0-0.177 0-0.265 0h0.014c-96.826-0.742-178.238-65.874-203.579-154.655l-0.367-1.505-27.733-99.84h-66.987c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h42.667l-109.227-395.52c-5.19-18.13-21.617-31.176-41.090-31.176-0.554 0-1.106 0.011-1.656 0.032l0.079-0.002h-61.44c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h63.147c58.521 0.028 107.856 39.323 123.088 92.964l0.219 0.902 116.053 418.133zM891.307 128h-37.973c-15.368 0.162-28.772 8.424-36.159 20.714l-0.107 0.193-63.573 107.093 64.427 107.093c7.347 12.25 20.374 20.434 35.347 20.905l0.066 0.002h37.12c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0h-37.12c-46.357-0.073-86.928-24.778-109.333-61.724l-0.321-0.569-40.533-67.84-40.533 67.84c-22.432 37.043-62.246 61.59-107.846 62.292l-0.101 0.001h-37.12c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h37.12c15.368-0.162 28.772-8.424 36.159-20.714l0.107-0.193 63.573-107.093-64.427-107.093c-7.347-12.25-20.374-20.434-35.347-20.905l-0.066-0.002h-37.12c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h37.12c46.357 0.073 86.928 24.778 109.333 61.724l0.321 0.569 39.68 65.707 40.533-67.84c22.995-36.364 62.991-60.16 108.544-60.16 0.090 0 0.18 0 0.27 0h37.106c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z'
              )
          );
          ctx.restore();
      }
      oldPaintFn.apply(this, arguments);
  }

  
  
  Sample:https://jscodemine.grapecity.com/share/LtPAXkj3oU6h-L1ASqod3w/?defaultOpen={“OpenedFileName”%3A[“%2Findex.html”%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}
  
  Please let us know if you still face any issues.
  
  Doc reference

  GC.Spread.Sheets.Text.paint(): https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.CellTypes.Text#paint

  CanvasRenderingContext2D.rotate(): https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/rotate

• 

  pedro.moraes

  • Post Options:
  • Link
    Copy

  Posted 22 March 2023, 9:02 am EST

  Thanks, it worked,

  But is there a way to stay centered in the cell?

  In your example she is in the corner

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 23 March 2023, 11:15 pm EST

  Hello,

  As I can understand, you want to align the icon in center vertically. For this use case, you can use ctx.translate() method to shift the origin of canvas grid to a particular point as per the height of the cell. You need to multiply zoom factor of the sheet to the y coordinate in the translate() method to keep the icon in center while zooming in or out in the sheet.

  Please refer to the code snippet and attached sample for further understanding.

  
  if (context.row < 1 && context.col < 1) {
          let zoomFactor = context.sheet.zoom();
          ctx.save();
          ctx.fillStyle = '#45DD98';
          ctx.translate(x + w - 20 * zoomFactor, y + h - (h - (14/*icon size*/*zoomFactor))/2);
          ctx.scale(-0.016 * context.sheet.zoom(), 0.016 * context.sheet.zoom());
          ctx.rotate(Math.PI);
          ctx.fill(
              new Path2D(
                  'M512 554.666c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0h-57.6l21.333 76.8c15.29 53.999 63.775 93.042 121.506 93.866l0.094 0.001c0.101 0 0.22 0.001 0.339 0.001 31.419 0 58.872-16.98 73.683-42.265l0.218-0.403c7.282-13.711 21.472-22.89 37.806-22.89 23.564 0 42.667 19.103 42.667 42.667 0 8.495-2.482 16.409-6.761 23.059l0.102-0.169c-30.058 51.373-84.964 85.334-147.802 85.334-0.088 0-0.177 0-0.265 0h0.014c-96.826-0.742-178.238-65.874-203.579-154.655l-0.367-1.505-27.733-99.84h-66.987c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h42.667l-109.227-395.52c-5.19-18.13-21.617-31.176-41.090-31.176-0.554 0-1.106 0.011-1.656 0.032l0.079-0.002h-61.44c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h63.147c58.521 0.028 107.856 39.323 123.088 92.964l0.219 0.902 116.053 418.133zM891.307 128h-37.973c-15.368 0.162-28.772 8.424-36.159 20.714l-0.107 0.193-63.573 107.093 64.427 107.093c7.347 12.25 20.374 20.434 35.347 20.905l0.066 0.002h37.12c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0h-37.12c-46.357-0.073-86.928-24.778-109.333-61.724l-0.321-0.569-40.533-67.84-40.533 67.84c-22.432 37.043-62.246 61.59-107.846 62.292l-0.101 0.001h-37.12c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h37.12c15.368-0.162 28.772-8.424 36.159-20.714l0.107-0.193 63.573-107.093-64.427-107.093c-7.347-12.25-20.374-20.434-35.347-20.905l-0.066-0.002h-37.12c-23.564 0-42.667-19.103-42.667-42.667s19.103-42.667 42.667-42.667v0h37.12c46.357 0.073 86.928 24.778 109.333 61.724l0.321 0.569 39.68 65.707 40.533-67.84c22.995-36.364 62.991-60.16 108.544-60.16 0.090 0 0.18 0 0.27 0h37.106c23.564 0 42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667v0z'
              )
          );
          ctx.restore();
      }

  Sample: https://jscodemine.grapecity.com/share/bPyUOn-jqEO_N3Q9idW1qg/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Doc reference:

  sheet.zoom(): https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Worksheet#zoom

  CanvasRenderingContext2D.translate(): https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/

  Regards,

  Ankit