图片拉伸的封装

 
实现图片拉伸有三种方式.
1.直接修改图片资源
2.通过图片框可直接修改stretching

 

3.就是通过代码的实现 
// 可以把NSString 的参数 改成NSArray 数组存放参数 (就是可以修改多个)
+ (UIImage *)stretchImageWith:(NSString *)imageString{
 
//实例化Image对象
UIImage *otherImage = [UIImage imageNamed:imageString];
 
//计算图片的中心点
CGFloat halfWidth = otherImage.size.width /2;
CGFloat halfHeight = otherImage.size.height / 2;
 
//对图片进行拉伸
return [otherImage resizableImageWithCapInsets:UIEdgeInsetsMake(halfHeight, halfWidth, halfHeight, halfWidth) resizingMode:UIImageResizingModeStretch];
 }

转载于:https://www.cnblogs.com/370213345chen/p/5662459.html

vue-quill-editor 是基于 Quill.js 封装的一个 Vue 富文本编辑器组件,要实现图片拉伸放大缩小,需要对 Quill.js 进行操作。 首先,需要在 Quill.js 的 toolbar 中添加图片缩放按钮。可以参考 Quill.js 官方提供的 custom toolbar demo,添加一个 “zoom” 按钮。 ``` <div id="toolbar"> <button class="ql-bold"></button> <button class="ql-italic"></button> <button class="ql-underline"></button> <button class="ql-image"></button> <button class="ql-zoom"></button> </div> ``` 然后,在初始化 Quill 实例时,需要监听 “selection-change” 事件,检测当前选中区域是否包含图片,并动态显示或隐藏 “zoom” 按钮。 ``` var quill = new Quill('#editor', { modules: { toolbar: '#toolbar' }, theme: 'snow' }); quill.on('selection-change', function(range, oldRange, source) { if (range) { var currentFormat = quill.getFormat(range); if (currentFormat.image) { document.querySelector('.ql-zoom').style.display = 'inline-block'; } else { document.querySelector('.ql-zoom').style.display = 'none'; } } }); ``` 接下来,实现 “zoom” 按钮的具体操作。可以通过监听 “click” 事件,获取当前选中的图片对象,然后对图片设置样式来实现缩放操作。 ``` var zoomButton = document.querySelector('.ql-zoom'); zoomButton.addEventListener('click', function() { var range = quill.getSelection(); if (range) { var currentFormat = quill.getFormat(range); if (currentFormat.image) { var img = quill.getSelection().getNativeRange().getBoundingClientRect().top; img.style.width = '200px'; img.style.height = '200px'; } } }); ``` 需要注意的是,这里的缩放操作只是简单地改变了图片的宽高值,而没有进行真正的图片缩放。如果需要实现更复杂的缩放效果,可以使用第三方库,比如 jQuery 的 resizable 方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值