Resize the cursor - css

Question

I'm building a drawing application (Like paint or Sketchpad) and I need to resize my cursor depending on of the line width of the pencil. The problem is, apparently, you can't resize your cursor. The solution that I found is to use a custom cursor (the normal cursor is changed for an image) and to resize the image. The thing is, I don't know if I need a function to do that or I can directly change the size of the image via SCSS (CSS).
Here's what I've done so far:
private setCursor(cursorType: DrawingCursor): void {
this.Canvas.setAttribute("style", "cursor:url(" + cursorType + "), auto;");}
The cursorType is the url of the custom cursor.
I'm doing this from an angular 8 project (in Typescript).
Thank you !

Answer 1

You can use NgClass binding to implement it. This way the Angular binding takes care of applying the CSS classes so you don't need to set styles manually.
To implement this solution first define the CSS classes for the canvas and the different cursor sizes. For example:
.myCanvas {
width: 400px;
height: 400px;
background-color: green;
}
.brush18px {
cursor: url('brush18px.png'), auto;
}
.brush24px {
cursor: url('brush24px.png'), auto;
}
.brush36px {
cursor: url('brush36px.png'), auto;
}
Then in the component you define a property that will provide the classes for the canvas and a property for the size of the brush. For example:
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
#Input() cursorSize = '18';
get canvasClasses() {
return {
myCanvas: true,
brush18px: this.cursorSize === '18',
brush24px: this.cursorSize === '24',
brush36px: this.cursorSize === '36',
};
};
}
The canvasClasses property must return an object that specifies for each CSS class name if it is applied or not by setting the value to true or false. I use a getter property here so the values update automatically when the size changes.
Now you can bind this in the template and the cursor will automatically update based on the cursorSize value.
Here is how the template looks like:
<canvas [ngClass]="canvasClasses"></canvas>
<br/>
<select [(ngModel)]="cursorSize">
<option>18</option>
<option>24</option>
<option>36</option>
</select>
I have created also a working StackBlitz sample so you can see it in action.

Answer 2

Another possible solution based on the comment on the first answer. This is more of a workaround solution where you hide the actual cursor and move around an image instead so it looks like it is the cursor. This was inspired by the second answer on this post about resizing a cursor image.
I implemented this solution in Angular using a directive that you add to the canvas element in the template. The directive takes as the main parameter the image to show as the cursor and has an additional parameter for the size for the image. I recommend an SVG image that resizes well. Still it is possible to use also a standard image.
Here is the implementation of the Directive for an SVG image:
#Directive({
selector: '[svgCursor]'
})
export class SvgCursorDirective {
private cursorSizeValue: number = 16;
#Input('svgCursor') public svgImage: SVGSVGElement;
#Input() public set cursorSize(cursorSize: number) {
this.cursorSizeValue = cursorSize;
this.updateCursorSize();
}
constructor(el: ElementRef) {
el.nativeElement.style.cursor = 'none'; // hides the browser cursor
}
#HostListener('mouseenter') onMouseEnter() {
// makes image visible only when mous enters the element
this.svgImage.style.visibility = 'visible';
}
#HostListener('mousemove', ['$event']) onMouseMove(e: MouseEvent) {
// draws the image at the mouse position
this.svgImage.style.left = e.clientX.toString();
this.svgImage.style.top = (e.clientY - this.cursorSizeValue).toString();
}
#HostListener('mouseleave') onMouseLeave() {
// hides image when the mouse leaves the element
this.svgImage.style.visibility = 'hidden';
}
private updateCursorSize() {
if (this.svgImage != null) {
this.svgImage.style.width = this.cursorSizeValue.toString();
this.svgImage.style.height = this.cursorSizeValue.toString();
}
}
}
Once you have the directive you can use it in the following way inside a component template:
<svg #cursorImage class="cursor" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z"/></svg>
<canvas class="myCanvas" [svgCursor]="cursorImage" [cursorSize]="cursorSize"></canvas>
As you can see you need to add a template reference variable to the image so you can pass it as a parameter to the svgCursor directive.
Also important for this to work you need to set the correct CSS styles to the image to disable things that are not needed. It is also set to invisble so it becomes visible only when the mouse enters te canvas.
This are the styles I used:
.myCanvas {
width: 400px;
height: 400px;
background-color: lightgreen;
}
.cursor {
position: absolute;
cursor: none;
pointer-events: none;
visibility: hidden;
}
I have created also a working StackBlitz sample so you can see how this works.