能不能提供一个根据页面坐标x y获取对应选区的接口？

阅读次数 117
consult feature

我们有一个需要跟外部拖拽库互动的需求，就是要从编辑器外部拖拽元素进入文档内部并识别 拖拽库用的是react-beautiful-dnd组件

现在的技术难点就是拖拽到iframe中如何获取鼠标对应位置文档选区/文档pos的问题 请问根据现有jssdk有什么好的解决方案吗？

没有的话后续可以提供一个根据页面坐标x y获取对应选区的接口吗

WPS_16781730523
1 Answers

你好，通过页面坐标获取对应选取的大致方法如下，希望能帮到你～

/**
 * Step1 首选您需要选取目标文本区域
 * 选取区域
 * https://solution.wps.cn/docs/client/api/Word/Range.html#range-start-end
 */
await instance.ready();
const app = instance.Application;
const range = await app.ActiveDocument.Range(0, 50);
const rangeText = await range.Text
console.log(rangeText);

image.png

/**
 * Step2 获取所选区域文本的开始和结束的坐标
 * 获取区域内字符索引的坐标
 * https://solution.wps.cn/docs/client/api/Word/Selection.html#getposbygcp
 */
const startPos = await app.ActiveDocument.ActiveWindow.Selection.GetPosByGcp(0);
const endPos = await app.ActiveDocument.ActiveWindow.Selection.GetPosByGcp(50);
console.log(startPos, endPos);

image.png

/**
 * Step3 判断当前鼠标x,y坐标是否落入该区域内
 * 此处需要根据您的业务逻辑实现判断函数
 */
const isDropArea = (xPos: number, yPos: number): boolean => {
    return (
        (xPos > startPos.X && xPos < endPos.X) && 
        (yPos > startPos.Y && yPos < endPos.Y)
        )? true : false;
}
技术支持-CL204